HTML5：Canvas畫布的簡單使用
阿新 • • 發佈：2019-01-04
使用Canvas時要使用<canvas></canvas>標籤來定義一個畫布。
但是在canvas上繪製各種東西，則需要javascript來實現。畫布僅僅提供的是一個繪製的場所。
其width,height屬性可以設定其水平方向的寬度和垂直方向的高度。
其中fillStyle屬性，可以是CSS顏色，漸變，或者圖案，其預設顏色為黑色。
畫矩形：
呼叫方法：fillRect(x,y,width,height)
其中x,y是左上角座標，width是矩形水平方向的寬度，height是矩形垂直方向的高度。單位都是畫素。
畫線條：moveTo(x,y)定義線條開始座標 ，lineTo(x,y)設定結束座標，stroke()畫線條方法。<!doctype html> <html> <head> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid red;"> </canvas> <script type="text/javascript"> //先找到canvas元素 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(20,20,200,200); //var img = new Image(); //img.src = "mystar.jfif"; //ctx.drawImage(img,0,0); </script> </body> </html>
<!doctype html> <html> <head> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid red;"> </canvas> <script type="text/javascript"> //先找到canvas元素 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(20,20); ctx.lineTo(200,200); ctx.stroke(); </script> </body> </html>
畫圓：arc(x,y,r,start,stop)
x:圓心在x軸上的座標
y:圓心在y軸上的座標
r:半徑長度。
start，起始角度，以弧度表示，圓心平行的右端為0度。
Stop:結束角度，以弧度表示。
Math.PI表示180度，畫圓的方向是順時針方向。!doctype html> <html> <head> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid red;"> </canvas> <script type="text/javascript"> //先找到canvas元素 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(200,200,150,0,Math.PI); ctx.stroke(); </script> </body> </html>
canvas繪製文字：
屬性： font 定義字型。
FillText(text,x,y) 再canvas上繪製實心的文字
StrokeText(text,x,y) 再canvas上繪製空心的文字
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "50px Plain";
ctx.fillText("Hello World",100,100);
ctx.strokeText("Hello World",100,200);
</script>
</body>
</html>
canvas漸變：漸變可以填充矩形，線條和文字等等。
CreateLinearGradient(x,y,x1,y1) – 建立線條漸變
CreateRadialGradient(x,y,r,x1,y1,r1) – 常見一個徑向/圓漸變。
X:漸變的開始圓的x座標
Y:漸變的開始圓的y座標
r:開始圓的半徑。
X1:漸變的結束圓的x半徑
Y1:漸變的結束圓的y半徑
AddColorStop()方法指定顏色停止，引數使用座標來描述。使用漸變，
設定fillStyle 或 strokeStyle的值為漸變。然後繪製形狀。
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;
ctx.font = "50px Plain";
ctx.fillText("Hello World",100,100);
ctx.strokeText("Hello World",100,200);
</script>
</body>
</html>
繪製圖片：
drawImage(image,x,y)
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "mystar.jfif";
ctx.drawImage(img,0,0);
</script>
</body>
</html>