canvas標簽

只是圖形容器定義圖形，使用 canvas 繪制路徑,盒、圓、字符以及添加圖像

1.創建一個畫布

<canvas id='cv' width='400px' height='600px'></canvas>

2.繪制圖形(javastript)

var cv_1 = document.getElementById("cv"); var can = cv_1.getContext('2d');

解析：
首先，找到canvas元素： var cv_1 = document.getElementById(“cv”);
然后，創建context對象： var can = cv_1.getContext(‘2d’);

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

Canvas--矩形：

// 填充顏色can.fillStyle = "rgb(200,0,0)";//繪制矩形can.fillRect (10, 10, 55, 50);can.fillStyle = "rgba(0, 0, 200, 0.5)";can.fillRect (50, 50, 55, 50);

解析：
（1）fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
（2）fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
x,y為相對位置，width,height為繪制的矩形的寬高
（3）clearRect(x,y,width,height) 清除指定區域大小

canvas坐標
距離屏幕左上角左邊10px，上邊10px，寬600px,高400px的矩形
fillRect(10，10，600，400)

Canvas--路徑

// 繪制一條直線 can.beginPath(); //新建一條path can.moveTo(50, 50); //把畫筆移動到指定的坐標 can.lineTo(200, 50); //繪制一條從當前位置到指定坐標(200, 50)的直線. //閉合路徑。會拉一條從當前點到path起始點的直線。如果當前點與起始點重合，則什么都不做 can.closePath(); can.stroke(); //繪制路徑。

解析：

（1）moveTo(x,y) 定義線條開始坐標
（2）lineTo(x,y) 定義線條結束坐標
（3）beginPath()開始繪制
（4）closePath()結束繪制

Canvas--圓弧

can.beginPath(); can.arc(95,50,40,0,2*Math.PI); can.stroke();

解析：
路徑方向默認為false（順時針）

can.beginPath(); can.arc(320, 220, 40, 0, -Math.PI / 2, true); can.fillStyle = 'red' can.closePath(); can.fill();

Canvas--文本

can.font="30px Arial"; can.fillText("Hello World",10,50); can.strokeText("Hello World",10,100);

解析：
（1）font - 定義字體
（2）fillText(text,x,y) - 在 canvas 上繪制實心的文本
（3）strokeText(text,x,y) - 在 canvas 上繪制空心的文本

Canvas--漸變

線性漸變：

// 創建漸變 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");// 填充漸變 can.fillStyle=grd; can.fillRect(10,10,150,80);

徑向漸變：

// 創建漸變 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");// 填充漸變 can.fillStyle=grd; can.fillRect(10,10,150,80);

解析：
（1）createLinearGradient(x,y,x1,y1) - 創建線條漸變
（2）createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
（3）addColorStop(0-1,“red”); 指定顏色停止，參數使用坐標來描述，可以是0至1

---

3.應用canvas繪制哆啦A夢

在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位坐標。

getBoundingClientRect()獲取頁面中某元素的左、上、右、下相對與瀏覽器窗口的位置

<style type="text/css">div{width: 50px;height: 50px;border: 1px solid #000000;position: relative;}#cv{margin: 0 auto;display: block;border: 2px solid #F0F8FF;} </style><canvas id="cv" width="400px" height="600px"></canvas><div id="divx" style="top: -600px;"></div> <div id="divy" style="top: -600px;"></div> <script type="text/javascript">var can=document.getElementById("cv");var cxt=can.getContext('2d');//canvas畫布相對瀏覽器窗口的距離x，yvar x=Math.floor(can.getBoundingClientRect().left);var y=Math.floor(can.getBoundingClientRect().top);window.onmousemove=function(event){move(event)}function move(event){var btx=event.clientX-x;//求出在canvas元素內的btx，btyvar bty=event.clientY-y;document.getElementById("divx").innerHTML=btx;document.getElementById("divy").innerHTML=bty;} </stricp>

---

補充內容：
二級貝塞爾曲線:quadraticCurveTo(cp1x, cp1y, x, y)
三級貝塞爾曲線:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
說明：
? 參數 1 和 2：控制點 1 的坐標
? 參數 3 和 4：控制點 2 的坐標
? 參數 5 和 6：結束點的坐標

//二級貝塞爾曲線繪制 can.moveTo(330,45)//路徑起點 can.quadraticCurveTo(380,100,430,45) can.lineWidth = 2 can.strokeStyle = 'blue' can.stroke()//三級貝塞爾 can.moveTo(350,210) can.bezierCurveTo(440,310,460,110,550,210) can.fillStyle = 'yellowgreen' can.stroke() can.fill() can.closePath()

---

哆啦A夢完整代碼：

<style type="text/css">div{width: 50px;height: 50px;border: 1px solid #000000;position: relative;}#cv{margin: 0 auto;display: block;border: 2px solid #F0F8FF;} </style><canvas id="cv" width="400px" height="600px"></canvas><div id="divx" style="top: -600px;"></div> <div id="divy" style="top: -600px;"></div> <script type="text/javascript">var can=document.getElementById("cv");var cxt=can.getContext('2d');var x=Math.floor(can.getBoundingClientRect().left);var y=Math.floor(can.getBoundingClientRect().top);window.onmousedown=function(event){move(event)}function move(event){var btx=event.clientX-x;var bty=event.clientY-y;document.getElementById("divx").innerHTML=btx;document.getElementById("divy").innerHTML=bty;}// 大頭cxt.beginPath();cxt.arc(200, 175, 175, 0.7 * Math.PI, 0.3 * Math.PI);//繪制弧，中心點（200，175），半徑175cxt.fillStyle = '#0bb0da';cxt.fill();cxt.stroke();cxt.closePath();// 臉cxt.beginPath();cxt.fillStyle = '#fff';cxt.moveTo(110, 110);//將路徑移到點（110，110），不創建線條cxt.quadraticCurveTo(-10, 200, 120, 315);//創建二次貝塞爾曲線,控制點(-10,200),結束點(120,315)cxt.lineTo(280, 315);//添加一個新點，然后在畫布中創建從（110，110）到（280，315）的線條cxt.quadraticCurveTo(410, 210, 290, 110);cxt.lineTo(110, 110);cxt.fill();cxt.stroke();cxt.closePath();//眼睛cxt.beginPath();cxt.lineWidth = 1;cxt.fillStyle = '#fff';cxt.moveTo(110, 110);cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//創建三次貝塞爾曲線,控制點1(110,25),控制點2(200,25),結束點(200,100)，也就是畫左上半橢圓cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//畫左下半橢圓cxt.moveTo(200, 100);cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);cxt.fill();cxt.stroke();cxt.closePath();// 左右眼球cxt.beginPath();cxt.fillStyle = '#000';cxt.arc(230, 130, 12, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//左眼球cxt.beginPath();cxt.fillStyle = '#000';cxt.arc(170, 130, 12, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();// 鼻子cxt.beginPath();cxt.arc(200, 165, 25, 0, 2 * Math.PI);cxt.fillStyle = '#d05823';cxt.fill();cxt.stroke();cxt.closePath();//左胡須cxt.beginPath();cxt.moveTo(80, 175);cxt.lineTo(150, 195);cxt.moveTo(80, 200);cxt.lineTo(150, 205);cxt.moveTo(80, 225);cxt.lineTo(150, 215);//中部胡須cxt.moveTo(200, 195);cxt.lineTo(200, 290);//右胡須cxt.moveTo(250, 195);cxt.lineTo(320, 175);cxt.moveTo(250, 205);cxt.lineTo(320, 200);cxt.moveTo(250, 215);cxt.lineTo(320, 225);cxt.stroke();//嘴cxt.moveTo(80, 240);cxt.quadraticCurveTo(200, 350, 320, 240);cxt.stroke();cxt.closePath();//圍巾cxt.beginPath();cxt.moveTo(96, 316);cxt.lineTo(305, 316);cxt.lineTo(320, 316);cxt.arcTo(330, 316, 330, 326, 10);//在畫布上創建介于兩個切線之間的弧，起點坐標為(330,316),終點坐標為(330,326),半徑為10cxt.lineTo(330, 336);cxt.arcTo(330, 346, 305, 346, 10);cxt.lineTo(81, 346);cxt.arcTo(71, 346, 71, 336, 10);cxt.lineTo(71, 326);cxt.arcTo(71, 316, 81, 316, 10);cxt.lineTo(96, 316);cxt.fillStyle = '#b13209';cxt.fill();cxt.stroke();cxt.closePath();//下半身cxt.beginPath();cxt.fillStyle = '#0bb0da';cxt.moveTo(80, 346);//左衣服cxt.lineTo(26, 406);cxt.lineTo(65, 440);cxt.lineTo(85, 418);cxt.lineTo(85, 528);cxt.lineTo(185, 528);//右衣服cxt.lineTo(315, 528);cxt.lineTo(315, 418);cxt.lineTo(337, 440);cxt.lineTo(374, 406);cxt.lineTo(320, 346);cxt.fill();cxt.stroke();cxt.closePath();//左手cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(37, 433, 30, 0, 2 * Math.PI);cxt.fill();cxt.stroke();//右手cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(363, 433, 30, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//肚子cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//小口袋cxt.beginPath();cxt.fillStyle = '#fff';cxt.moveTo(130, 394);cxt.lineTo(270, 394);cxt.moveTo(130, 394);cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);cxt.fill();cxt.stroke();cxt.closePath();//兩只腳的空隙cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(200, 529, 20,Math.PI, 0);cxt.fill();cxt.stroke();cxt.closePath();//左腳cxt.beginPath();cxt.fillStyle='#fff';cxt.moveTo(180,528);cxt.lineTo(72,528);cxt.bezierCurveTo(52,528,52,558,72,558);cxt.lineTo(180,558);cxt.moveTo(180,558);cxt.bezierCurveTo(200,558,200,528,180,528);cxt.fill();cxt.stroke();cxt.closePath();//右腳cxt.beginPath();cxt.fillStyle='#fff';cxt.moveTo(220,528);cxt.lineTo(328,528);cxt.bezierCurveTo(348,528,348,558,328,558);cxt.lineTo(220,558);cxt.moveTo(220,558);cxt.bezierCurveTo(200,558,200,528,220,528);cxt.fill();cxt.stroke();cxt.closePath(); </script>

效果圖：

總結

以上是生活随笔為你收集整理的H5 canvas画布总结 （绘制哆啦A梦）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。