HTML 5 畫布(canvas)，html畫布canvas

HTML 5 畫布(canvas)，html畫布canvas

canvas 元素使用 JavaScript 在網頁上繪製映像，本身是沒有繪圖能力。

canvas 是一個矩形地區，可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。

下面來做幾個樣本：

1、填充畫布

<canvas id="myCanvas" width="200" height="100">2、擷取座標
<script type="text/javascript">
 function cnvs_getCoordinates(e){
   x=e.clientX;
   y=e.clientY;
   document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }
 function cnvs_clearCoordinates(){
   document.getElementById("xycoordinates").innerHTML="";}
</script>

<div id="coordiv">3、繪製線條、圖形

 1繪製正方形如下：
<canvas id="myCanvas" width="200" height="100">4、繪製漸層

<canvas id="myCanvas" width="200" height="100">5、圖片

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
您的瀏覽器不支援 canvas 標籤.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="aa.png"
cxt.drawImage(img,10,20); //x,y
</script>

 執行如下：