canvas學(xué)習(xí)之API整理筆記(一)
其實canvas本身很簡單,就是去學(xué)習(xí)它的API,多看實例,多自己動手練習(xí),多總結(jié)。但是canvas的API實在是有點多,對于初學(xué)者來說,可能學(xué)到一半就止步不前了。我也有這種感覺,在學(xué)習(xí)的過程中,編寫實例,用到了其中很多的屬性和方法,但是回頭來看的時候總覺得什么也沒用。所以決定系統(tǒng)性的記錄一下它常用到的API,方便以后查閱,也順便造福一下大家。
開始之前
假設(shè)html代碼中有一個canvas標(biāo)簽:
<canvas id="canvas">你的瀏覽器不支持canvas!</canvas>
如果你的瀏覽器是IE8及以下,那么很遺憾,上面那段文字會被渲染出來!而且下面的方法也都不能使用了;所以請使用支持canvas的瀏覽器來使用后面的方法。
//獲取canvas容器 var can = document.getElementById(‘canvas'); //創(chuàng)建一個畫布 var ctx = can.getContext(‘2d');
另外我們可以還可以得到容器的寬和高度
var canWid = can.width; //canvas 的寬度 var canHei = can.height; //canvas 的高度
canvas只是一個容器,本身沒有繪制的能力,所以我們要得到一個畫布ctx,使之具有繪制各種圖形的能力。下文所有的方法都是ctx的方法。
繪制
繪制一個矩形:
//填充矩形(x, y是橫縱坐標(biāo),原點在canvas的左上角) ctx.fillRect(x, y, width, height); //邊框矩形,默認(rèn)1px 黑色。 ctx.strokeRect(x, y, width, height); //清除指定的矩形區(qū)域,變?yōu)橥该? ctx.clearRect(x, y, width, height); //繪制動態(tài)效果時,常用來清除整個畫布
繪制路徑:
//新建路徑,beginPath是繪制新圖形的開始 ctx.beginPath() //路徑(線)的起點,一般在上面這條命令后執(zhí)行 ctx.moveTo(x, y) //線的終點 ctx.lineTo(x, y) //繪制圓形 ctx.arc(x, y, r, start, end, true/false) //x, y圓心,r半徑,start和end是開始和結(jié)束角度,false表示順時針(默認(rèn)),true表示逆時針。 //繪制弧線 ctx.arcTo(x1, y1, x2, y2, r); //當(dāng)前端點、(x1,y1)和(x2,y2)這三個點連成的弧線,r是半徑。 //閉合路徑,不是必須的,如果線的終點跟起點一樣,會自動閉合。 ctx.closePath() //通過線條繪制輪廓(邊框) ctx.stroke() //通過路徑填充區(qū)域(實心) ctx.fill()
說明:
- fill()和stroke()函數(shù)表示繪圖結(jié)束。如果要繼續(xù)繪制,需要重新新建路徑(beginPath())。
- 如果lineTo()最后的路徑?jīng)]有封閉,fill()函數(shù)會自動封閉路徑,而stroke()函數(shù)不會。
例:繪制一個三角形
ctx.beginPath(); ctx.moveTo(75, 50); //路徑起點 ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); //自動將路徑閉合,并默認(rèn)填充黑色。
樣式
顏色
ctx.fillStyle = 'red' //針對fill()有效的顏色,還可以取值:'#fff'、'rgba(0, 0, 0, 0.5)'等。 ctx.strokeStyle = 'red' //針對stroke()有效的顏色,取值同上。 ctx.globalAlpha = 0.5; //透明度
線段端點
ctx.lineWidth = 2; //線條寬度 ctx.lineCap = 'butt(默認(rèn))'、'round(圓弧)'、'square(方形)' //線段端點顯示的樣式
var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; ctx.strokeStyle = 'black'; for (var i=0;i<lineCap.length;i++){ ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); }
效果如下圖:
線段連接處
ctx.lineJoin = 'miter(默認(rèn))'、round(圓角)、`bevel(橫線)` //兩線段連接處所顯示的樣子
var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; for (var i=0;i<lineJoin.length;i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(10,50+i*40); ctx.lineTo(50,10+i*40); ctx.lineTo(90,50+i*40); ctx.lineTo(130,10+i*40); ctx.lineTo(170,50+i*40); ctx.stroke(); }
效果如下圖:
虛線
ctx.setLineDash([4, 2]) //設(shè)置虛線,參數(shù)為數(shù)組,第一個值為實現(xiàn)寬度,第二個值為空白的寬度 ctx.lineDashOffset = 0; //虛線起始偏移量
var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var offset = 0; function draw() { offset++; if (offset > 16) { offset = 0; } ctx.clearRect(0,0, can.width, can.height); ctx.setLineDash([6, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10,10, 100, 100); } setInterval(draw, 20);
效果如下圖:
漸變
var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定義線性漸變,漸變的起點 (x1,y1) 與終點 (x2,y2)。 var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定義徑向漸變 bg.addColorStop(0, 'red'); //定義好,之后開始上色 bg.addColorStop(0.5, 'blue'); bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
var bg = ctx.createLinearGradient(0, 0, 0, 200); //線性漸變 bg.addColorStop(0, 'black'); bg.addColorStop(0.6, '#fff'); ctx.fillStyle = bg; ctx.fillRect(10, 10, 100, 100);
效果如下圖:
var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); //徑向漸變 bg1.addColorStop(0, '#FF5F98'); bg1.addColorStop(0.75, '#FF0188'); bg1.addColorStop(1, 'rgba(255,1,136,0)'); ctx.fillStyle = bg1; ctx.fillRect(0,0,150,150);
效果如下圖:
文字
var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; //X軸陰影距離,負(fù)值表示往上,正值表示往下 ctx.shadowOffsetY = 2; //Y軸陰影距離,負(fù)值表示往左,正值表示往右 ctx.shadowBlur = 2; //陰影的模糊程度 ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //陰影顏色 ctx.font = "30px Times New Roman"; //設(shè)置字體和字體大小 ctx.fillStyle = "Black"; ctx.fillText("Sample String", 15, 30); //實體文字 ctx.strokeStyle = 'red'; ctx.strokeText('Hello world', 15, 100); //邊框文字
效果如下圖:
文字的屬性出了上面的列出的以外,還有以下一些屬性:
ctx.font = '20px Times New Roman'; ctx.textAlign = 'center'; //start, end, left, right or center ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom ctx.direction = 'inherit' //ltr, rtl, inherit
圖像
var img = new Image(); img.src= './images/background.jpg'; ctx.drawImage(img, 0, 0); //img為圖像,(0, 0)為起始坐標(biāo)
這里的img可以是一個img對象,也可以是一個img元素。
<img id="img" src="./images/background.jpg" style="display:none;"> ctx.drawImage(document.getElementById('img'), 0, 0);
另外,繪制圖片的時候還可以對圖片進行縮放,類似于css中的background-size:
ctx.drawImage(img, 0, 0, w, h); //w、h指定圖片的寬高,則會同比例縮放。
變形
慢慢的從這里開始,就要開始涉及到復(fù)雜的繪制了。而開始復(fù)雜的繪制之前,我們得先了解一個概念:canvas繪圖的狀態(tài)。
狀態(tài)
canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個快照。另外,用來操作這個狀態(tài)的有兩個方法:save()和restore()。
save()用來保存當(dāng)前狀態(tài),restore()用來恢復(fù)剛才保存的狀態(tài)。他們都可以多次調(diào)用。
ctx.fillStyle = 'black'; ctx.fillRect(20, 20, 150, 150); ctx.save(); //保存當(dāng)前狀態(tài) ctx.fillStyle= '#fff'; ctx.fillRect(45, 45, 100, 100); ctx.restore(); //恢復(fù)到剛才保存的狀態(tài) ctx.fillRect(70, 70, 50, 50);
效果如下圖:
位移(translate)
ctx.translate(x, y); //更改canvas的原點
var ctx = document.getElementById('canvas').getContext('2d'); for(var i = 1; i< 4; i++) { ctx.save(); //使用save方法保存狀態(tài),讓每次位移時都針對(0,0)移動。 ctx.translate(100*i, 0); ctx.fillRect(0, 50, 50, 50); ctx.restore(); }
效果如下圖:
旋轉(zhuǎn)
ctx.rotate(Math.PI * 2) //參照原點順時針旋轉(zhuǎn)360度
ctx.translate(75,75); //把原點移動到(75, 75); for (var i=1; i<6; i++){ // 從里到外一共6圈 ctx.save(); ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)'; for (var j=0; j<i*6; j++){ // 每一圈有i*6個圓點 ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); }
效果如下圖:
縮放
ctx.scale(x, y); //基于原點縮放,x、y是兩個軸的縮放倍數(shù)
var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = 'red'; ctx.scale(0.8, 1.2); ctx.beginPath(); ctx.arc(75, 75, 60, 0, Math.PI * 2); ctx.fill();
本來繪制的是一個半徑為60的圓形,但是經(jīng)過縮放之后,實際效果如下:
動畫
元素的位置移動,就形成了動畫。
一幀一幀的來渲染這個元素,而且這個元素每一幀的位置都不一樣,我們的眼睛看到的就是動畫了。實現(xiàn)起來也很方便,js提供了兩個方法:setTimeout 和setInterval都可以實現(xiàn),但是一個有逼格的程序員實現(xiàn)動畫是不會用這兩個方法的,而是用requestAnimationFrame這個方法。有什么區(qū)別呢?下面簡單做個比較。
- setInterval(myFun, 10); 意思是隔一毫秒執(zhí)行一個myFun函數(shù),但是這樣就有一個問題了,比如我myFun函數(shù)里面繪制的東西比較耗時,而10ms之內(nèi)還沒有完全繪制出來,但是這段代碼強制1ms之后又開始繪制下一幀了,所以就會出現(xiàn)丟幀的問題;反之,如果時間設(shè)置太長,就會出現(xiàn)畫面不流暢、視覺卡頓的問題。
- requestAnimationFrame(myFun); 如果我們這樣寫,又是什么意思呢?意思是根據(jù)一定的時間間隔,會自動執(zhí)行myFun函數(shù)來進行繪制。這個”一定的時間間隔”就是根據(jù)瀏覽器的性能或者網(wǎng)速快慢來決定了,總之,它會保證你繪制完這一幀,才會繪制下一幀,保證性能的同時,也保證動畫的流暢。
結(jié)語
這些API已經(jīng)包含了大部分常用的了,結(jié)合requestAnimationFrame函數(shù)已經(jīng)可以繪制很多酷炫的效果了。但是光看這些API很簡單,但是想要在繪制游戲或者動畫中用起來得心應(yīng)手還需要看大量的實例,自己實踐總結(jié)的。
本文就到這里,感謝各位看官~
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
Echarts地圖添加引導(dǎo)線效果(labelLine)
這篇文章主要介紹了Echarts地圖添加引導(dǎo)線效果(labelLine),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JavaScript實現(xiàn)經(jīng)典排序算法之插入排序
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)經(jīng)典排序算法之插入排序,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交,所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢?下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果,感興趣的朋友參考下吧2016-11-11JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(四):串(BF)
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(四):串(BF),串是由零個或多個字符組成的有限序列,又叫做字符串,本文著重講解了BF(Brute Force)算法,需要的朋友可以參考下2015-06-0610個必備的JavaScript?async/await工具函數(shù)分享
當(dāng)談到異步編程時,async/await是JavaScript中常用的功能之一,本文為大家整理了10個常用的await和async函數(shù)示例,感興趣的小伙伴可以參考一下2023-12-12