Html5 Canvas入門及經(jīng)典應(yīng)用

時(shí)間：2019-02-15?????來(lái)源：華清遠(yuǎn)見(jiàn)

canvas想必對(duì)于前端的工程師都不陌生了，它是 HTML5 新增的「畫(huà)布」元素，是HTML5 的一大亮點(diǎn)，canvas翻譯過(guò)來(lái)其實(shí)就是畫(huà)布的意思，它可以替代flash,制作網(wǎng)頁(yè)的很多動(dòng)畫(huà)效果以及游戲。渲染效率非常高，不像flash要在游覽器安裝flash adobe插件，canvas不需要安裝任何插件即可渲染這個(gè)動(dòng)畫(huà)。這時(shí)候廣大吃瓜群眾肯定就會(huì)問(wèn)，他的兼容性咋樣呀，它的兼容性所有主流游覽器都支持。大家可以放心使用，做出好效果叫你老板給你加雞腿。。先做會(huì)夢(mèng)在來(lái)寫(xiě)代碼。

介紹了這么多那怎么使用呢？Canvas其實(shí)只是一個(gè)畫(huà)布，如果想要實(shí)現(xiàn)繪畫(huà)功能只能通過(guò)javascript去調(diào)用api來(lái)繪畫(huà)。打個(gè)比方，大家小時(shí)候都學(xué)過(guò)美術(shù)吧，首先是不是要有一個(gè)白紙或者白板，然后需要筆對(duì)吧，那個(gè)白板就相當(dāng)于是canvas，看下下面的例子，下面這個(gè)就相當(dāng)于繪畫(huà)工具箱，筆或者顏料等繪畫(huà)工具。ctx其實(shí)就是得到了畫(huà)布的上下文對(duì)象，那么以后我們都是通過(guò)ctx來(lái)操作繪圖的。

在游覽器打開(kāi)的效果：

如果想讓畫(huà)布滿屏怎么辦？有小伙伴肯定說(shuō)，設(shè)置css呀，答案是no,你在css里面設(shè)置它里面的元素會(huì)變形的，強(qiáng)調(diào)設(shè)置canvas的寬高不要在css里面設(shè)置，可以在canvas行內(nèi)樣式寫(xiě)，也可以在js里面寫(xiě)。我們來(lái)寫(xiě)個(gè)滿屏的背景顏色為黑色的畫(huà)布。

在我們繪制圖形之前，必須要搞清楚canvas的坐標(biāo)系統(tǒng)，這樣才能知道我們具體要在哪里繪制圖形。

canvas的2D環(huán)境繪圖坐標(biāo)系統(tǒng)，原點(diǎn)(0，0)位于canvas元素的左上角頂點(diǎn)處，沿x軸向右為正值，沿y軸向下為正值，與我們數(shù)學(xué)中的直角坐標(biāo)系是不同的

首先我們來(lái)畫(huà)個(gè)圓，arc() 方法創(chuàng)建弧/曲線(用于創(chuàng)建圓或部分圓)。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

第1,2個(gè)參數(shù)坐標(biāo)就是圓心的位置，第3個(gè)數(shù)學(xué)不差的都知道是半徑哈，第4,5個(gè)就是開(kāi)始角和結(jié)束角，第6個(gè)就是選是順時(shí)針還是逆時(shí)針，False = 順時(shí)針，true = 逆時(shí)針。例子，

arc(100,75,50,0*Math.PI,1.5*Math.PI)

如果就是下面一句話沒(méi)有任何效果，你只是給他瞄了一個(gè)路徑而已，這時(shí)候我們要給它描邊和填充。他們默認(rèn)的顏色都是黑色，我們可以通過(guò)調(diào)用api改變顏色

fill():? ? ?填充當(dāng)前繪圖

stroke():? 繪制已定義的路徑

fillStyle:? 改變填充顏色

strokeStyle:改變描邊顏色

現(xiàn)在我們來(lái)畫(huà)一個(gè)橘色的圓

實(shí)現(xiàn)的效果：

下面我們來(lái)做一個(gè)網(wǎng)頁(yè)中常見(jiàn)的一個(gè)效果，就是從無(wú)到與有動(dòng)態(tài)生成一個(gè)圓，這個(gè)該怎么實(shí)現(xiàn)呢？

假設(shè)有個(gè)開(kāi)始角度startAngle，一個(gè)結(jié)束角度endAngle,他們的關(guān)系是不是他們加起來(lái)是2π

var startAngle = -(1 / 2 * Math.PI); //開(kāi)始角度

var endAngle = startAngle + 2 * Math.PI; //結(jié)束角度

現(xiàn)在角度有了，那怎么讓它動(dòng)起來(lái)呢？我們給它定義一個(gè)臨時(shí)變量來(lái)存儲(chǔ)tmpAngle,最開(kāi)始應(yīng)該是startAngle 對(duì)吧，然后呢一點(diǎn)一點(diǎn)給它加角度，那我們給它一個(gè)增量

var xAngle = 1 * (Math.PI / 180); //偏移角度量

var tmpAngle = startAngle; //臨時(shí)角度變量

現(xiàn)在開(kāi)始角度，結(jié)束角度，偏移量有了，那接下來(lái)是不是應(yīng)該整個(gè)定時(shí)器讓他跑起來(lái)，這里我們介紹下最新的定時(shí)器 requestAnimationFrame，官方定義 requestAnimationFrame方法告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來(lái)更新動(dòng)畫(huà)。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。有興趣的可以下去研究下

現(xiàn)在來(lái)分析下重要的渲染函數(shù)，其實(shí)很簡(jiǎn)單是不是相當(dāng)于每次畫(huà)一個(gè)圓弧，臨時(shí)角度作為結(jié)束角度，每次給臨時(shí)角度加上偏移角度量就可以了，那結(jié)束條件是不是就是當(dāng)tmpAngle>endSngle就結(jié)束了

if(tmpAngle >= endAngle){

return;

}else{

tmpAngle += xAngle;

}

現(xiàn)在干正事畫(huà)圓圈，現(xiàn)在就so easy了

ctx.arc(r, r, cR, startAngle, tmpAngle);

接下來(lái)寫(xiě)中間的文字，我們要用到context.fillText(text,x,y,maxWidth);繪制填色的，主要是第一個(gè)文本值應(yīng)該怎么寫(xiě)呢

(tmpAngle -? startAngle) / (endAngle - startAngle) * 100

但是有小數(shù)點(diǎn)，我們給它取個(gè)整數(shù)，這樣是不是就可以了

Math.round((tmpAngle -? startAngle) / (endAngle - startAngle) * 100) + '%'

現(xiàn)在就一個(gè)簡(jiǎn)單的圓環(huán)效果就出來(lái)了，我把全部代碼都貼在后面

*{

margin:0px;

padding:0px;

}

var c=document.getElementById('canvas');

//得到畫(huà)布的上下文

var ctx=canvas.getContext('2d')

//給畫(huà)布的寬度設(shè)置為預(yù)覽器的寬高

canvas.width=document.documentElement.clientWidth;

canvas.height=document.documentElement.clientHeight;

//? ? ?var mW = c.width = 300;

//var mH = c.height = 300;

var lineWidth = 5;

var r = canvas.width/5; //中間位置

var cR = r - 4 * lineWidth; //圓半徑

var startAngle = -(1 / 2 * Math.PI); //開(kāi)始角度

var endAngle = startAngle + 2 * Math.PI; //結(jié)束角度

var xAngle = 1 * (Math.PI / 180); //偏移角度量

var fontSize = 35; //字號(hào)大小

var tmpAngle = startAngle; //臨時(shí)角度變量

//渲染函數(shù)

var rander = function(){

if(tmpAngle >= endAngle){

return;

}else{

tmpAngle += xAngle;

}

ctx.clearRect(0, 0, canvas.width, canvas.height);

//畫(huà)圈

ctx.beginPath();

ctx.lineWidth = lineWidth;

ctx.strokeStyle = 'deeppink';

ctx.arc(r, r, cR, startAngle, tmpAngle);

ctx.stroke();

ctx.closePath();

//寫(xiě)字

ctx.fillStyle = 'deeppink';

ctx.font= fontSize + 'px Microsoft Yahei';

ctx.textAlign='center';

ctx.fillText( Math.round((tmpAngle -? startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

requestAnimationFrame(rander);

};

rander();

總結(jié)

以上是生活随笔為你收集整理的html5 canvas实际应用,Html5 Canvas入门及经典应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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