canvas基礎入門（一）繪制線條、三角形、七巧板
阿新 • • 發佈：2018-06-22
java i++ rip BE lin scrip 瀏覽器 返回 函數
復雜的內容都是有簡單的線條結合而成的，想要繪制出復雜好看的內容先從畫直線開始
canvas繪制直線先認識幾個函數
beginPath()；開始一條路徑，或重置當前的路徑
moveTo(x,y)；用於規定直線的起點坐標
lineTo(x,y)；用於規定直線的終點坐標
closePath()；方法創建從當前點到開始點的路徑
stroke()；方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色
利用上面的函數就可以簡單的畫出直線了
代碼
<canvas id="canvas" style="border: 1px solid #000;">當前瀏覽器不支持canvas，請更換瀏覽器再試</canvas> <script type="text/javascript"> window.onload= function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//設置canvas寬高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.closePath(); context.stroke(); }</script>
接下來個直線添加點樣式：
lineWidth；屬性設置或返回當前線條的寬度，以像素計
strokeStyle；屬性設置或返回用於筆觸的顏色、漸變或模式
fillStyle；屬性設置或返回用於填充繪畫的顏色、漸變或模式
fill()；方法填充當前的圖像（路徑）。默認顏色是黑色
JavaScript代碼如下：
<canvas id="canvas" style="border: 1px solid #000;">當前瀏覽器不支持canvas，請更換瀏覽器再試</canvas> <script type="text/javascript"> window.onload= function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//設置canvas寬高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red"; context.stroke(); } </script>
會繪制直線後我們接著來繪制一些圖像，要繪制圖像也是使用lineTo(x,y)，繪制三角形，代碼如下
<canvas id="canvas" style="border: 1px solid #000;">當前瀏覽器不支持canvas，請更換瀏覽器再試</canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//設置canvas寬高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.lineTo(100, 700); context.lineTo(100, 100); context.closePath(); context.lineWidth = 5; context.strokeStyle = "red"; context.stroke(); } </script>
這個時候在是實現一些復雜的圖像，七巧板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas繪制七巧板</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aa;display: block;margin: 50px auto;">
當前瀏覽器不支持Canvas，請更換瀏覽器再試
</canvas>
<script type="text/javascript">
var tangram = [
{p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},
{p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"},
{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: "#fa8ecc"},
{p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"},
];
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
for(var i = 0; i < tangram.length; i++) {
draw(tangram[i], context)
}
}
function draw(plece, cxt) {
cxt.beginPath();
cxt.moveTo(plece.p[0].x, plece.p[0].y);
for(var i = 1; i < plece.p.length; i++) {
cxt.lineTo(plece.p[i].x, plece.p[i].y);
}
cxt.closePath();
cxt.fillStyle = plece.color;
cxt.fill();
cxt.strokeStyle = "black";
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
</body>
</html>
canvas基礎入門（一）繪制線條、三角形、七巧板