1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>09-canvas繪製座標系
title
>
6<
style
>7*
11canvas
16style
>
17head
>
18<
body
>
19<
canvas
width
="500"
height
="400"
>
canvas
>
20<
script
>
21//
1.拿到canvas
22let ocanvas
=document.queryselector(
"canvas");
23//
2.從canvas中拿到繪圖工具
24let octx
=ocanvas.getcontext("2d
");25//
3.定義變數儲存小方格的尺寸
26let gridsize =50
;27//4.拿到canvas的寬高
28let canvaswidth
=octx.canvas.width;
29let canvasheight
=octx.canvas.height;
30//
5.計算在垂直方向和水平方向可以繪製多少條橫線
31let row
=math.floor(canvasheight
/gridsize);
32let col
=math.floor(canvaswidth
/gridsize);
33//
6.繪製垂直方向的橫線
34for
(let i =0
; i
<
row; i++)
41//
7.繪製水平方向的橫線
42for
(let i =0
; i
<
col; i++)
4950
//1.計算座標系原點的位置
51let originx
=gridsize;
52let originy
=canvasheight
-gridsize;
53//
2.計算x軸終點的位置
54let endx
=canvaswidth
-gridsize;
55//
3.繪製x軸
56octx.beginpath();
57octx.moveto(originx, originy);
58octx.lineto(endx, originy);
59octx.strokestyle ="
#000";
60octx.stroke();
61//
4.繪製x軸的箭頭
62octx.lineto(endx -10
, originy +5
);63
octx.lineto(endx -10
, originy -5
);64
octx.lineto(endx, originy);
65octx.fill();
6667
//5.計算y軸終點的位置
68let endy
=gridsize;
69//
3.繪製y軸
70octx.beginpath();
71octx.moveto(originx, originy);
72octx.lineto(originx, endy);
73octx.strokestyle ="
#000";
74octx.stroke();
75//
4.繪製x軸的箭頭
76octx.lineto(originx -5
, endy +10
);77
octx.lineto(originx +5
, endy +10
);78
octx.lineto(originx, endy);
79octx.fill();
80script
>
81body
>
82html
>
Canvas座標系轉換
canvas中的座標是從左上角開始的，x軸沿著水平方向 按畫素 向右延伸，y軸沿垂直方向向下延伸。左上角座標為x 0，y 0的點稱作原點。在預設座標系中，每乙個點的座標都是直接對映到乙個css畫素上。但是如果影象的每次繪製都參考乙個固定點將缺少靈活性，於是在canvas中引入 當前座標系 的概念，所...
Canvas 繪製座標系中的點以及折線
示例圖如下 可以看到這裡繪畫的座標點比較大，為了更好看一些。其實不管大小，基本的繪製步驟如下 設定座標點的中心圓點位置 x0，y0 設定座標點的大小 dotsize 計算座標點的上下左右四角的點座標 條件1和2可以直接通過設定獲取，而座標點上下左右四角座標看看下面的計算示意圖。從上圖可以看到要繪製乙...
canvas繪製太陽系
學習canvas有一段時間了，順便寫個小專案練手，該專案用到的知識點包括 es6物件導向 基本的三角函式 canvas部分有 座標變換，漸變，混合模式，線條和圖形的繪製。實際效果 solar system 推薦在chrome或safari下執行 首先建立場景類，主要用來組織管理物件，統一更新和繪製物...