HTML5 Canvas繪製簡單形狀

使用canvas來進行繪畫，它像很多其他dom物件一樣，有很多屬性和方法，操作這些方法，實現繪畫

獲取canvas物件，呼叫document.getelementbyid()方法

呼叫canvas物件的getcontext()方法，獲取context物件，引數：string的」2d」

繪製線段

呼叫context物件的moveto()方法，把起點位置定義好，引數：x，y

呼叫context物件的lineto()方法，把終點位置定義好，引數：x，y

呼叫context物件的stroke()方法，畫一條線

如果不呼叫moveto()方法，起點的位置是上次的點

繪製矩形

呼叫context物件的fillrect()方法，填充矩形，引數：起點橫座標，起點縱座標，寬度，高度

呼叫context物件strokerect()方法，邊框矩形，引數：起點橫座標，起點縱座標，寬度，高度

例如：context.fillrect(0,0,100,100); 會畫出乙個黑色的矩形

注意：html5 canvas fillrect座標和大小一直不對，是因為canvas的寬度和高度必須內聯在canvas標籤中才對

繪製扇形

呼叫context物件的beginpath()方法，開啟路徑

呼叫context物件的moveto()方法，把路徑移動到圓心位置，引數：x，y

呼叫context物件的arc()方法，繪製圓弧，引數：圓心x座標，圓心y座標，開始角度，結束角度

呼叫context物件的closepath()方法，關閉路徑

呼叫context物件的fill()方法，填充顏色

繪製貝塞爾曲線

呼叫context物件的beziercurveto()方法，繪製曲線路徑，

引數：第一控制點x，第一控制點y，

第二控制點x，第二控制點y，

最終控制點x，最終控制點y

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>測試canvas
title
>
head
>
<
body
>
<
canvas 
id="mycanvas"
width
="500px"
height
="1000px"
>
canvas
>
<
script
>
varcanvas
=document.getelementbyid(
'mycanvas');
varcontext
=canvas.getcontext("2d
");//繪製矩形
context.fillrect(0,
0,100,
100);
context.strokerect(
120,0,
100,
100);
//繪製扇形
context.beginpath();
context.moveto(50,
220);
context.arc(50,
220,50,
0,math.pi
/4);
context.closepath();
context.fill();
//繪製線段
context.moveto(0,
300);
context.lineto(
100,
300);
context.lineto(
100,
400);
context.stroke();
//繪製貝塞爾曲線
HTML5 Canvas繪製簡單形狀
使用canvas來進行繪畫，它像很多其他dom物件一樣，有很多屬性和方法，操作這些方法，實現繪畫 獲取canvas物件，呼叫document.getelementbyid 方法 呼叫canvas物件的getcontext 方法，獲取context物件，引數 string的 2d 繪製線段 呼叫con...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
html5 Canvas繪製線條
function draw cxi.beginpath 初始化路徑繪製 cxi.moveto 75,50 將路徑的 起始點 座標確定 cxi.lineto 100,85 將另乙個 結點 座標確定 cxi.lineto 100,20 將另二個 結點 座標確定 這裡的結點可以理解成photoshop裡面...