技術分享

<canvas>

&lt;canvas&gt;通過JavaScript動態繪製圖形。而&lt;canvas&gt;元素只是用於圖形的容器。通過&lt;canvas&gt;可以在網頁上製作許多動態圖形。

先簡單舉個例子

<canvas id="testCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>


var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(200, 0); //定義線的起點
ctx.lineTo(0, 100); //定義線的終點
ctx.stroke(); //使用stroke（）方法實際繪製線條

畫出來的樣子

可以畫文字

var c = document.getElementById("testCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

 

空心字

var c = document.getElementById("testCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);