使用Canvas繪制一個(gè)游戲人物屬性圖

前言
身為一個(gè)程序員竟然沉迷游戲,wtf??? 都怪騰訊前幾天出了一款叫做尋仙的手游,作為曾經(jīng)的資深玩家,小V君猶豫再三還是忍不住入坑了。入坑了怎么不去打游戲,還在這里發(fā)文章? 不不不,小V君今天在這里可不是要跟大家討論游戲,作為一個(gè)好好學(xué)習(xí),天天向上的有位少年,游戲嘛,只是業(yè)余的,碼代碼才是王道?。?!所以小V君今天給大家分享一下怎么使用Canvas來(lái)繪制一個(gè)游戲登錄界面的人物屬性圖!
先上一波圖片,怎么樣? 人物是不是很帥,很中國(guó)風(fēng)???小V君當(dāng)年可是花了四年時(shí)間來(lái)玩這個(gè)人物哦。。。
一. 什么是Canvas?
canvas 元素用于在網(wǎng)頁(yè)上繪制圖形。HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制2D圖像。 在矩形區(qū)域的畫(huà)布上,控制其每一像素,JavaScript 來(lái)繪制 2D圖形,逐像素進(jìn)行渲染。可以通過(guò)多種方法使用canvas 元素繪制路徑、矩形、圓形、字符以及添加圖像。
注意!??!
canvas 標(biāo)簽本身是不具備繪圖功能,只能使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像哦。
二. 任務(wù)分析
為了簡(jiǎn)潔明了,小V君沒(méi)有在頁(yè)面上花什么時(shí)間,希望大家不要介意,畢竟JS才是今天的主角哦。
首先,我們來(lái)簡(jiǎn)單分析一下。這個(gè)人物的屬性圖是由六個(gè)內(nèi)嵌的正六邊形組成的,再由六根線(xiàn)從連接這個(gè)正六邊形的中心,最后根據(jù)人物的屬性進(jìn)行顏色的填充。怎么樣?是不是很簡(jiǎn)單,只要三步就可以繪制出這個(gè)游戲人物屬性圖哦??赡艽蠹視?huì)覺(jué)得小V君說(shuō)起來(lái)容易,實(shí)際又該怎么操作呢?各位看官大爺別著急,小的這就送上代碼。
三. 代碼部分
var mW = 400, mH = 400, mCtx = null, mCount = 6, mCenter = mW/2, mRadius = mCenter - 50, mAngle = Math.PI*2/mCount, mColorPolygon = '#000000', mData = [ ['爆發(fā)', 100], ['防御', 60], ['治療', 50], ['控制', 60], ['輔助', 30], ['機(jī)動(dòng)', 70] ], mColorText = '#000000', canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.width = mW; canvas.height = mH; mCtx = canvas.getContext('2d');
首先,我們需要指定一個(gè)id屬性 (腳本中經(jīng)常引用), 再使用width 和 height 屬性定義的畫(huà)布的大小.在這里我將畫(huà)布的寬和高都設(shè)置為400,六邊形嘛,數(shù)量當(dāng)然是6,圖形的中心等于它自身寬度的一半,線(xiàn)條的顏色就使用黑色,在利用一個(gè)數(shù)組寫(xiě)上自定義的數(shù)據(jù)就可以開(kāi)始繪畫(huà)啦。
細(xì)心的朋友可能會(huì)問(wèn)mRadius為什么等于mCenter減50呢?在這里,請(qǐng)?jiān)试S小V君賣(mài)個(gè)關(guān)子,大家看完就自然知道結(jié)果啦~~~
繪制六個(gè)內(nèi)嵌的六邊形
function drawPolygon(ctx) { ctx.save(); // save the default state ctx.strokeStyle = mColorPolygon; var r = mRadius / mCount; for(var i = 0; i < mCount; i++) { ctx.beginPath(); //開(kāi)始路徑 var currR = r * (i + 1); for(var j = 0; j < mCount; j++) { var x = mCenter + currR*Math.cos(mAngle*j); var y = mCenter + currR*Math.sin(mAngle*j); ctx.lineTo(x, y); } ctx.closePath(); //閉合路徑 ctx.stroke() // restore to the default state } ctx.restore(); }
為了代碼整體的美觀和復(fù)用性,我們定一個(gè)名為drawPolygon的函數(shù),再使用一個(gè)for循環(huán)來(lái)完成六邊形的繪制??吹竭@里,大家可能會(huì)問(wèn)怎么還使用了sin和cos函數(shù)了,想當(dāng)年學(xué)數(shù)學(xué)那可是一個(gè)受罪,怎么現(xiàn)在還要受它的折磨。。。小V君也深表無(wú)奈,代碼跟數(shù)學(xué)本來(lái)就是一家,代碼里面很多地方都要運(yùn)用Math函數(shù),所以在數(shù)學(xué)這個(gè)坑上小V君與大家同在(┬_┬)。(ps:js中需要用到的數(shù)學(xué)公式很多網(wǎng)上都有,不需要自己手寫(xiě),只要增加點(diǎn)印象,一個(gè)復(fù)制就可以拉過(guò)來(lái)用了,啦啦啦,小V君也很會(huì)偷懶的,哈哈哈~~~)
繪制直線(xiàn)
function drawLines(ctx) { ctx.save(); ctx.beginPath(); ctx.strokeStyle = mColorPolygon; for( var i = 0; i< mCount; i++){ var x = mCenter + mRadius * Math.cos(mAngle*i); var y = mCenter + mRadius * Math.sin(mAngle*i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); } ctx.stroke(); ctx.restore(); }
同理,定義一個(gè)名為drawLines的函數(shù)來(lái)實(shí)現(xiàn)這部分功能。Canvas畫(huà)線(xiàn)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,比較難理解的估計(jì)還是在這個(gè)for循環(huán)的函數(shù)里面,對(duì)于六邊形的繪制大家可以參考一下這篇博文 ? 如何繪制六邊形
繪制覆蓋區(qū)域
function drawRegion(ctx) { ctx.save(); ctx.beginPath(); for(var i = 0; i< mCount; i++){ var x = mCenter + mRadius*Math.cos(mAngle*i)*mData[i][5]/100; var y = mCenter + mRadius*Math.sin(mAngle*i)*mData[i][6]/100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255,0,0,.5)'; ctx.fill(); ctx.store(); }
寫(xiě)到這里,我們的屬性圖差不多就繪制完成了。但是,圖形內(nèi)的顏色具體是怎么進(jìn)行填充的呢?在這里我們使用了fill語(yǔ)法進(jìn)行填充,在代碼中只需要使用ctx.fill()就可以實(shí)現(xiàn)了。
解釋?zhuān)禾畛?,是將閉合的路徑的內(nèi)容填充具體的顏色,在這里我設(shè)置了透明度為0.5的紅色,默認(rèn)顏色黑色。如果所有的描點(diǎn)沒(méi)有構(gòu)成封閉結(jié)構(gòu),也會(huì)自動(dòng)構(gòu)成一個(gè)封閉圖形。
繪制文本
function drawText(ctx) { ctx.save(); var fontSize = mCenter/12; ctx.font = fontSize + 'px Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i< mCount; i++){ var x = mCenter + mRadius*Math.cos(mAngle*i); var y = mCenter + mRadius*Math.sin(mAngle*i); //通過(guò)不同的位置,調(diào)整文本的顯示位置 if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){ ctx.fillText(mData[i][0], x, y + fontSize); }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize); }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y); }else{ ctx.fillText(mData[i][0], x, y); } } ctx.restore(); }
至此,我們的人物屬性圖就繪制好了。不知道各位看完之后有沒(méi)有想明白前面小V君埋下的問(wèn)題呢?50px,對(duì)的,mRadius等于mCenter減50中的那50px就是給我們的文本留出來(lái)的位置,代碼中的if語(yǔ)句就是通過(guò)不同的位置來(lái)調(diào)整文本的顯示位置。
四. 小結(jié)
綜上所述,簡(jiǎn)單說(shuō)明了如何使用Canvas來(lái)繪制一個(gè)人物屬性圖,以上內(nèi)容屬個(gè)人理解和網(wǎng)上學(xué)習(xí)總結(jié),如有錯(cuò)誤,歡迎指正共勉。關(guān)于Canvas這個(gè)元素,它應(yīng)用的領(lǐng)域可是非常的廣闊哦。比如在游戲方面,canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧,canvas游戲在流暢度和跨平臺(tái)方面更牛。在可視化數(shù)據(jù)方面,百度的echart、d3.js、three.js等等用運(yùn)用到了canvas。如果你以為Canvas的運(yùn)用只有這些,那就打錯(cuò)特錯(cuò)了,在現(xiàn)在以及未來(lái)的智能機(jī)時(shí)代,HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用,而使用Canvas來(lái)實(shí)現(xiàn)動(dòng)態(tài)的廣告效果再合適不過(guò)。
到此這篇關(guān)于使用Canvas繪制一個(gè)游戲人物屬性圖的文章就介紹到這了,更多相關(guān)Canvas游戲人物屬性圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
詳解基于 Canvas 手?jǐn)]一個(gè)六邊形能力圖
這篇文章主要介紹了詳解基于 Canvas 手?jǐn)]一個(gè)六邊形能力圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一2019-09-02