canvas即畫布，是HTML5中新加的一個元素，可以制作出豐富的網(wǎng)頁內(nèi)容【canvas API】

通過與js來配合使用，如下所示：

HTML5：

? ? <canvas id="myCanvas" width="300px" height="300px" style="display:block; border:1px solid black; margin: auto"></canvas> //創(chuàng)建畫布（200*400）

JS：

? ? ?var c = document.getElementById("myCanvas"); //找到畫布

? ? ?var ctx = c.getContext("2d"); //創(chuàng)建畫筆

? ? ?ctx.fillStyle = "#008"; //設(shè)置畫筆顏色

1、繪制圖像：

? ? ?ctx.fillRect(50,50,100,150); //繪制圖形

輸出結(jié)果

2、繪制路徑：

? ? ?ctx.moveTo(10,10); //從坐標(biāo)(10,10)的地方開始

? ? ?ctx.lineTo(100,200); //在坐標(biāo)(100,200)的地方停止

? ? ?ctx.stroke(); //開始畫

輸出結(jié)果

eg：畫圓

? ? ?ctx.beginPath();

? ? ?ctx.arc(70,90,30,0,Math.PI*2);?

? ? ?ctx.closePath();

? ? ?ctx.fill();

輸出結(jié)果

3、繪制文本：

（1）常用漢字字體

（2）常用英文字體

? ? ctx.font="30px Georgia Italic"; //設(shè)置字體

? ? ctx.fillText("hello world",80,100); //設(shè)置文本及其起始位置

輸出結(jié)果

4、繪制漸變效果：

（1）線性變化：【詳見】

? ? var clor=ctx.createLinearGradient(150,0,0,0);

? ? clor.addColorStop(0,"#008");

? ? clor.addColorStop(1,"#FFF");

? ? ctx.fillStyle=clor;

? ? ctx.fillRect(50,100,200,80);

輸出結(jié)果

（2）圓形漸變：【詳見】

? ? var clor=ctx.createRadialGradient(150,150,50,150,150,100);

? ? clor.addColorStop(0,"#008");

? ? clor.addColorStop(1,"#800");

? ? ctx.fillStyle=clor;

? ? ctx.fillRect(50,50,200,200);

輸出結(jié)果

5、繪制圖片：

? ? ?var img = new Image();

? ? ?img.src = "http://img.zcool.cn/community/0130f1565197fe6ac7251c94bd1b25.jpg";

? ? ?img.onload = function() {

? ? ? ? ? ctx.save(); //保存現(xiàn)場

? ? ? ? ? ctx.scale(0.3,0.3); //圖片縮放

? ? ? ? ? ctx.drawImage(img,50,150); //繪制圖片

? ? ? ? ? ctx.restore; //恢復(fù)現(xiàn)場

? ? ?}

輸出結(jié)果

注：

? ? ? ?1、canvas左上角起點坐標(biāo)為(0,0)；

? ? ? ?2、fillRect("相對畫布的起始位置X坐標(biāo)","相對畫布的起始位置Y坐標(biāo)","繪制圖形的寬","繪制圖形的高")；

? ? ? 3、畫圓時若使用ctx.stroke()，畫出的園則不填充；

? ? ? 4、繪制文本時可使用ctx.strokeText()，繪制空心文字；