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";兩種不同的顏色寫法，均可以用