canvas 的簡單運用
阿新 • • 發佈:2018-11-15
1.在html5中使用
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;" width="1024" height="768"> </canvas> <!-- 1.不設定寬和高預設300*150 2.不支援css設定,canvas還有畫素的考慮 3.以左上角為原點 --> </body> </html>
2.用JavaScript進行繪製
1)先找到物件
var canvas = document.getElementById('canvas');
2)可以用JavaScript設定
canvas.width = 1024;
canvas.height = 768;
3)先判定瀏覽器是否執行canvas,執行建立物件
if(canvas.getContext('2d')){
var context = canvas.getContext('2d');
}else{
alert('當前瀏覽器不支援canvas,請更換瀏覽器再試');
}
4)繪製一條直線
context.moveTo(10,10);//起始座標
context.lineTo(500,10);//終點座標
5)繪製一個多邊形
context.moveTo(20,20);
context.lineTo(200,200);
context.lineTo(20,200);
context.lineTo(20,20);
注意:線條的繪製後面新增
context.stroke();
6)如果繪製多個在開始新增
context.beginPath();
結束新增
context.closePath();
7)多邊形填充顏色
context.fillStyle = "rgb(2,100,30)"; context.fill(); context.stroke();
8) 設定線條
context.lineWidth = 5;//寬度
context.strokeStyle = "#005588";
context.strokeStyle = "red";
兩種不同的顏色寫法,均可以用