HTML5 canvas畫布詳解（一）-H5教程-PHP中文網

Canvas的特點

Canvas標籤的使用

Canvas的其他實例

直線

圓

漸變

映像

首頁

web前端

H5教程

HTML5 canvas畫布詳解（一）

黄舟

Mar 17, 2017 pm 03:32 PM

HTML5中canvas元素用於在網頁上繪製圖形。

Canvas的特點

Canvas畫布是一個矩形區域，可以控制其每一個像素
Canvas使用JavaScript來控制畫圖
Canvas具有直線、矩形、圓以及添加圖像的方法

Canvas標籤的使用

下面的程式碼是使用canvas畫面繪製一個200*200紅色矩形：

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);
    </script>
    </body>
    </html>

登入後複製

將上面的程式碼儲存為canvas.html，並將其編碼設為utf-8（否則中文亂碼），使用瀏覽器開啟就可以看到如下效果：
HTML5 canvas畫布詳解（一）

<canvas id="myCanvas" width="200"    style="max-width:90%">

登入後複製

這裡建立Canvas 標籤，並定義其id為myCanvas，以便於JavaScript繪圖時取得該標籤物件。
再看JavaScript繪圖部分：

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);

登入後複製

第一句getElementById，透過Canvas標籤的ID取得canvas物件。
第二句getContext，取得context物件。
第三句呼叫Context物件的方法fillStyle，即填滿其顏色。
第四句呼叫Context物件的fillRect方法指定填滿的區域。

Canvas的其他實例

直線

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();</script></body></html>

登入後複製

運行結果如下：
HTML5 canvas畫布詳解（一）

圓

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    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></body></html>

登入後複製

運行結果如下：
HTML5 canvas畫布詳解（一）

漸變

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
    </script>
    </body>
    </html>

登入後複製

效果如下：
HTML5 canvas畫布詳解（一）

映像

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var img=new Image();
    img.src="1.png";
    img.onload=function(e){
        cxt.drawImage(img,0,0);
    }
    cxt.drawImage(img,0,0);
    </script>
    </body>
    </html>

登入後複製

注意，一定要給Img添加onload事件，否則圖片不顯示。
其中，1.png為自己找的圖片素材。開啟頁面可以看到圖片顯示在canvas畫布了。我的運行效果如下，圖片百度隨便找的，湊合看~~
HTML5 canvas畫布詳解（一）