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

编程问答

078_html5Canvas

發(fā)布時(shí)間：2025/4/17 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 078_html5Canvas 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. canvas元素用于在網(wǎng)頁上繪制圖形。

2. 什么是Canvas?

2.1. html5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。

2.2. 畫布是一個(gè)矩形區(qū)域, 您可以控制其每一像素。

2.3. canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

3. Canvas對(duì)象的屬性

3.1. height屬性: 畫布的高度。和一幅圖像一樣, 這個(gè)屬性可以指定為一個(gè)整數(shù)像素值或者是窗口高度的百分比。當(dāng)這個(gè)值改變的時(shí)候, 在該畫布上已經(jīng)完成的任何繪圖都會(huì)擦除掉。默認(rèn)值是150px。

3.2. width屬性: 畫布的寬度。和一幅圖像一樣, 這個(gè)屬性可以指定為一個(gè)整數(shù)像素值或者是窗口寬度的百分比。當(dāng)這個(gè)值改變的時(shí)候, 在該畫布上已經(jīng)完成的任何繪圖都會(huì)擦除掉。默認(rèn)值是300px。

4. 創(chuàng)建Canvas元素

4.1. 向html5頁面添加canvas元素。

4.2. 規(guī)定元素的id、寬度和高度:

5. 通過JavaScript來繪制

5.1. canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成:

5.2. JavaScript使用id來尋找canvas元素:

var c=document.getElementById("myCanvas");

5.3. 然后, 創(chuàng)建 CanvasRenderingContext2D對(duì)象:

var cxt=c.getContext("2d");

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

5.4. 下面的兩行代碼繪制一個(gè)紅色的矩形:

cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);

5.5. fillStyle方法將其染成紅色, fillRect方法規(guī)定了形狀、位置和尺寸。

6. 理解坐標(biāo)

6.1. 上面的fillRect方法擁有參數(shù)(0,0,150,75)。

6.2. 意思是: 在畫布上繪制150x75的矩形, 從左上角開始(0,0)。

6.3. 如下圖所示, 畫布的X和Y坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。

7.Canvas畫矩形

7.1.代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>矩形</title></head><body><canvas id="myCanvas">your browser does not support the canvas tag </canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,180,100);</script></body> </html>

7.2.效果圖

8.Canvas畫線條

8.1.代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>線條</title></head><body><canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</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>

8.2.效果圖

9.?Canvas畫圓形

9.1.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圓形</title></head><body><canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</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>

9.2. 效果圖

10. Canvas畫漸變

10.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>漸變</title></head><body><canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,200,100);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#0000FF");cxt.fillStyle=grd;cxt.fillRect(0,0,200,100);</script></body> </html>

10.2.效果圖

11.?Canvas畫圖片

11.1.?畫圖片有兩個(gè)API

drawImage(image, x, y, imgWidth, imgHeight) drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)

11.2.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖片</title></head><body>原圖: 寬: 140px, 高:122px<img src="button.png" /><br /><br /><canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c3c3;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var img = new Image();img.src = 'button.png';// 圖片異步加載, onload回調(diào)函數(shù)當(dāng)圖片加載完成時(shí)執(zhí)行。img.onload = function(){// drawImage(image, x, y, imgWidth, imgHeight)ctx.drawImage(img, 0, 0);ctx.drawImage(img, 200, 0);ctx.drawImage(img, 0, 200, 140, 122);ctx.drawImage(img, 200, 200, 140, 61);ctx.drawImage(img, 400, 200, 70, 122);// drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)ctx.drawImage(img, 0, 0, 140, 122, 0, 400, 140, 122);ctx.drawImage(img, 0, 0, 140, 61, 200, 400, 140, 61);ctx.drawImage(img, 0, 61, 140, 61, 400, 400, 140, 61);};</script></body> </html>

11.3.?效果圖

總結(jié)

以上是生活随笔為你收集整理的078_html5Canvas的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

_html5Canvas