html5的canvas元素使用JavaScript在網頁上繪制圖像

畫布是一個矩形區域，可以控制其每一個像素

canvas擁有多種繪制路徑，矩形，圓形，字符以及添加圖像的方法。

HTML添加canvas元素 規定元素的ID，寬度和高度

<canvas id="canvas" width="200" height="100"></canvas>

javascript使用ID來尋找canvas元素

//制作矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

//制作線性

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50)
cxt.lineTo(10,50)
cxt.stroke()

//制作圓形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

var c=document.getElementById("canvas");

然後創建context對象

var cxt=c.getContext("2d");

下面兩行代碼繪制一個紅色矩形

cxt.fillStyle="red";

cxt.fillRect(0,0,100,100);

fillStyle方法將其染成紅色 filllRect方法規定了形狀，位置和尺寸

canvas的基本應用