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

時間：2019-02-15?????來源：華清遠見

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

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

在游覽器打開的效果：

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

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

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

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

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

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

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

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

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

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

fillStyle:? 改變填充顏色

strokeStyle:改變描邊顏色

現(xiàn)在我們來畫一個橘色的圓

實現(xiàn)的效果：

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

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

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

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

現(xiàn)在角度有了，那怎么讓它動起來呢？我們給它定義一個臨時變量來存儲tmpAngle,最開始應(yīng)該是startAngle 對吧，然后呢一點一點給它加角度，那我們給它一個增量

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

var tmpAngle = startAngle; //臨時角度變量

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

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

if(tmpAngle >= endAngle){

return;

}else{

tmpAngle += xAngle;

}

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

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

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

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

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

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

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

*{

margin:0px;

padding:0px;

}

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

//得到畫布的上下文

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

//給畫布的寬度設(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); //開始角度

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

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

var fontSize = 35; //字號大小

var tmpAngle = startAngle; //臨時角度變量

//渲染函數(shù)

var rander = function(){

if(tmpAngle >= endAngle){

return;

}else{

tmpAngle += xAngle;

}

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

//畫圈

ctx.beginPath();

ctx.lineWidth = lineWidth;

ctx.strokeStyle = 'deeppink';

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

ctx.stroke();

ctx.closePath();

//寫字

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入门及经典应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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