canvas初學,教你學會在canvas畫布上畫線

canvas 在html5要實現非常炫酷的效果 可以使用2d繪圖功能，所有引入canvas(畫布) 多用於游戲開發，並且低版本ie不支持

    注意:

    1.canvas默認大小為with:300 height:150

    2.如果瀏覽器不支持canvas，該瀏覽器會顯示canvas標簽的內容，但是不會運行canvas所繪制的效果

    3.canvas是行元素 

    4.canvas設置寬高的時候只能通過標簽的屬性進行設置，不能通過css樣式中的height和width進行設置，也不能通過js設置，也就是canvas.style.height/width，通過標簽以為的方式設置寬高會把canvas繪制的圖像拉伸

    5.可以直接給canvas屬性設置大小

HTML部分:

<canvas id="canvas" width="400" height="400">你的瀏覽器太low了 不支持canvas 趕快換一個吧</canvas>

JS部分:

① 獲取canvas

var canvas = document.getElementById('canvas');

② 在canvas畫布上里創建一支畫筆

var ctx = canvas.getContext("2d");

③ 開始一個新路徑(在畫布上重新起個頭)

ctx.beginPath();

④ 起始位置

ctx.moveTo(0, 0);

⑤ 設置線的寬度

ctx.lineWidth = 2;

⑥ 設置畫筆描邊兒顏色

ctx.strokeStyle = "red";

⑦ 開始畫線,lineTo 划線(橫坐標,縱坐標)先畫一個正方形

ctx.lineTo(400, 0);
ctx.lineTo(400, 400);
ctx.lineTo(0, 400);
ctx.lineTo(0, 0);

⑧ 執行繪制

ctx.stroke();

效果如下:

 

 

 

⑨ 關閉當前路徑(如果不關閉,之后的代碼會覆蓋之前的代碼,比如畫筆的顏色,畫筆的寬度等);

ctx.closePath();

⑩ 保存當前繪畫

ctx.save();

結束end

我們在這個里面再畫一個正方形

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.lineTo(100, 300);
ctx.lineTo(300, 300);
ctx.lineTo(300, 100);
ctx.lineTo(100, 100);
ctx.stroke();

如果你畫的是一個封閉圖形我們可以進行填充

設置填充顏色:

ctx.fillStyle = "yellow";

填充:

ctx.fill();

效果如下:

 

 

最后一步:

清除畫布,我們可以清除整個畫布也可以清除畫布的部分

清除畫布的部分:

可清除部分畫布clearRect(x, y, 結束為止的x, 結束為止的y);

x:要清除部分左上角X坐標
y:要清除部分左上角Y坐標

ctx.clearRect(0, 0, 400, 200);

效果如下:我這里清除畫布的上半部分

 

 

也可清除整個畫布clearRect(0, 0, 畫布的寬, 畫布的高);

ctx.clearRect(0, 0, 400, 400);

這里是清除了整個畫布

 

 Happy end!

設置線的寬度