溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5中如何使用canvas

發(fā)布時間:2021-01-26 12:47:06 來源:億速云 閱讀:183 作者:小新 欄目:web開發(fā)

小編給大家分享一下HTML5中如何使用canvas,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

<canvas>新元素

<canvas> 元素用于圖形的繪制,通過腳本 (通常是JavaScript)來完成.

<canvas> 標(biāo)簽只是圖形容器,您必須使用腳本來繪制圖形。

你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。

HTML5中如何使用canvas

  注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容。

  畫方

<!--fillStyle是填充樣式,如果不設(shè)置fillStyle屬性,默認(rèn)填充色為黑色,fillRect是畫一個矩形,參數(shù)為X,Y,Width,Height--><!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.fillRect(10,10,100,100);
          //ctx.moveTo(0,0);    //定義開始坐標(biāo)
         //ctx.lineTo(100,100);  //定義結(jié)束坐標(biāo)
         //ctx.stroke();      //繪制線條
            })</script></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>

運行結(jié)果:

HTML5中如何使用canvas

  畫圓

<!--arc畫圓,參數(shù)是X,Y,半徑,起始角,結(jié)束角,順時針/逆時針(可選)XY指的是圓點的距離--><!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.arc(50,50,50,0,2*Math.PI);
                ctx.stroke();
})</script><style type="text/css">canvas{border: 1px solid #000;}</style></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>

運行結(jié)果:

HTML5中如何使用canvas

  漸變

  createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變

  createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變

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

運行結(jié)果:

HTML5中如何使用canvas

  徑向/圓漸變

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 創(chuàng)建漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

運行結(jié)果:

HTML5中如何使用canvas

圖像

<!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><style type="text/css">canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;}</style></head><body><img src="img/a.ico" id="flower" /><canvas id="myCanvas" width="100" height="100"></canvas><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");var img=document.getElementById("flower");
                img.onload=function(){
                    ctx.drawImage(img,20,20,80,80);  //drawImage(對象,X,Y,W,H)}
            })</script></body></html>

運行結(jié)果:

HTML5中如何使用canvas(右圖為canvas圖像)

以上是“HTML5中如何使用canvas”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI