canvas繪製圖形——直線、多邊形、七巧板
阿新 • • 發佈：2018-11-06
前言
canvas 是 html5 中的一個新元素，主要用於圖形的繪製，通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器，也可以叫做畫布，通過 js 指令碼可以繪製出各種各樣的影象。
建立canvas
建立 canvas 只需要新增 canvas 標籤就可以了，在建立時，除 id 外一般還會定製畫布尺寸（width height）。定義畫布尺寸不建議使用 css 的方式定製，這裡的尺寸也定義了畫布內部的解析度，是 w3c 的標準用法。
<!DOCTYPE html>
<html lang="zh-cn"> 繪製圖形
在 js 中首先要對 canvas 物件初始化。
var canvas = document.getElementById('canvas');
var context = 繪製直線
繪製直線用到的兩個函式主要是 context.moveTo(x1, y1) 和 context.lineTo(x2, y2)。表示一條從 (x1, y1) 到 (x2, y2) 的直線， context.lineTo( ) 函式可以多次呼叫實現多筆畫。然後呼叫 context.stroke( ) 繪製。
// 狀態設定
context.moveTo(100,100) // 起點
context.lineTo(700,700)
context.lineTo(700,100)
context.lineWideh = 5 // 畫筆寬度
context. 繪製多邊形
使用 context.lineTo( ) 可以實現多筆畫，因此回到起點的話，就繪製出了一個多邊形。
context.moveTo(100,100) // 起點
context.lineTo(700,700)
context.lineTo(700,100)
context.lineTo(100,100) // 回到起點
context.stroke();
上述例子中就繪製了一個空心三角形，我們可以使用 context.fill( ) 來給三角形著色。用法如下：
context.fillStyle = "rgb(2,100,30)";
context.fill();
繪製多個圖形
在實際應用中，大部分情況下不會只繪製一條直線或一個圖形，當要在一個畫布中繪製多個圖形時，要使用 context.beginPath( ) 和 context.closePath( )。
context.beginPath();
context.moveTo(100,100) // 起點
context.lineTo(700,700)
context.lineTo(700,100)
context.lineTo(100,100)
// 繪製
context.fillStyle = "rgb(2,100,30)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,200) // 起點
context.lineTo(600,700)
// 繪製
context.strokeStyle = "blue";
context.lineWidth = 5;
context.stroke();
context.closePath();
例項：繪製七巧板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>七巧板</title>
</head>
<body>
<canvas id="canvas"></canvas>
<style>
#canvas{
margin: auto;
}
</style>
<script>
// 定義資料
var data = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67beef"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#6a5acd"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
];
// 繪製
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
for(var i = 0;i < data.length;i++){
draw(data[i], context);
}
};
// 繪製函式
function draw(data,context){
context.beginPath();
context.moveTo(data.p[0].x, data.p[0].y);
for(var i = 1;i < data.p.length;i++){
context.lineTo(data.p[i].x, data.p[i].y);
}
context.lineTo(data.p[0].x, data.p[0].y)
context.closePath();
context.fillStyle = data.color;
context.fill();
}
</script>
</body>
</html>
效果圖
