當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

H5 canvas画布总结（绘制哆啦A梦）

發(fā)布時(shí)間：2024/1/18 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5 canvas画布总结（绘制哆啦A梦）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

canvas標(biāo)簽

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

1.創(chuàng)建一個(gè)畫布

2.繪制圖形(javastript)

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

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

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

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 默認(rèn)設(shè)置是#000000（黑色）。
（2）fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
x,y為相對(duì)位置，width,height為繪制的矩形的寬高
（3）clearRect(x,y,width,height) 清除指定區(qū)域大小

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

Canvas--路徑

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

解析：

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

Canvas--圓弧

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

解析：
路徑方向默認(rèn)為false（順時(shí)針）

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 上繪制實(shí)心的文本
（3）strokeText(text,x,y) - 在 canvas 上繪制空心的文本

Canvas--漸變

線性漸變：

// 創(chuàng)建漸變 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);

徑向漸變：

// 創(chuàng)建漸變 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) - 創(chuàng)建線條漸變
（2）createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變
（3）addColorStop(0-1,“red”); 指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0至1

3.應(yīng)用canvas繪制哆啦A夢(mèng)

在畫布上對(duì)繪畫進(jìn)行定位。鼠標(biāo)移動(dòng)的矩形框上，顯示定位坐標(biāo)。

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

補(bǔ)充內(nèi)容：
二級(jí)貝塞爾曲線:quadraticCurveTo(cp1x, cp1y, x, y)
三級(jí)貝塞爾曲線:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
說明：
? 參數(shù) 1 和 2：控制點(diǎn) 1 的坐標(biāo)
? 參數(shù) 3 和 4：控制點(diǎn) 2 的坐標(biāo)
? 參數(shù) 5 和 6：結(jié)束點(diǎn)的坐標(biāo)

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

哆啦A夢(mèng)完整代碼：

效果圖：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： IOS模仿微信小视频开发心得
下一篇： Exchange服务故障解决图解(摘自天