HTML5 - Canvas（二）
阿新 • • 發佈：2020-08-10
HTML5 Canvas
- HTML5 <canvas> 元素用於圖形的繪製，通過指令碼（通常是 Javascript）來完成
- HTML5 <canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形
- 可以通過多種方法使用 canvas 繪製路徑、盒、圓、字元以及新增影象
Canvas - 畫布
<!DOCTYPE html> <html> <head> <meta cahrset="UTF-8"> <title>建立一個畫布</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> </body> </html>
Canvas - 影象
<!DOCTYPE html> <html> <head> <meta cahrset="UTF-8"> <title>使用 Javascript 建立一個畫布</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html>
Canvas - 座標
- Canvas 是一個二維網格
- Canvas 的左上角座標為(0,0)
- 以上 fillRect 方法擁有引數 (0,0,150,75) 代表在畫布上繪製 150 × 75 的矩形，從左上角 (0,0) 開始
Canvas - 路徑
在 Canvas 上畫線，我們使用以下兩種方法：
- moveTo(x,y) 定義線條開始座標
- lineTo(x,y) 定義線條結束座標
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas - 路徑</title> </head> <body> <p> 畫路徑 </p> <canvas id="myCanvas" width="200" height="100" style="border:1px solid red"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas - 路徑</title>
</head>
<body>
<p>
畫圓
</p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath(0,0);
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Canvas - 文字
使用 Canvas 繪製文字，重要的屬性和方法如下：
- font - 定義字型
- fillText(text,x,y) - 在 canvas 上繪製實心的文字
- strokeText(text,x,y) - 在 canvas 上繪製空心的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas - 文字</title>
</head>
<h4>
使用 Arial 字型在畫布上繪製一個實心文字
</h4>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid green"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
<h4>
使用 Arial 字型在畫布上繪製一個空心文字
</h4>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid green"></canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</html>
Canvas - 漸變
以下由兩種方法用來設定 Canvas 漸變：
- createLinearGradient(x,y,x1,y1) - 建立線條漸變
- createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變
注意：當我們使用漸變物件時，必須使用兩種或兩種以上的停止顏色。addColorStop()方法指定顏色停止，引數使用座標來描述，可以是0至1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas - 漸變</title>
</head>
<body>
<h4>
建立一個線性漸變，使用漸變填充矩形
</h4>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid blue"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
// 建立漸變
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
<h4>
建立一個徑向/圓漸變，使用漸變填充矩形
</h4>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid blue"></canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
// 建立漸變
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Canvas - 圖片
把一張圖片放在畫布上，使用以下方法：
- drawImage(image,x,y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas - 圖片</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="default.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>