使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉

2020-03-24 19:20:08

字體：大中小

供稿：網(wǎng)友

圓角矩形是由四段線條和四個(gè)1/4圓弧組成，拆解如下。
因?yàn)槲覀円獙懙氖?a href='http://www.survivalescaperooms.com/tag/PHPhanshu_5301_1.html' target='_blank'>函數(shù)而不是一個(gè)固定的圓角矩形，所以這里列出的是函數(shù)需要的參數(shù)。分析好之后，直接敲出代碼。JavaScript Code復(fù)制內(nèi)容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); drawRoundRect(context,200,100,400,400,50); context.strokeStyle= #0078AA ; context.stroke(); } functiondrawRoundRect(cxt,x,y,width,height,radius){ cxt.beginPath(); cxt.arc(x+radius,y+radius,radius,Math.PI,Math.PI*3/2); cxt.lineTo(width-radius+x,y); cxt.arc(width-radius+x,radius+y,radius,Math.PI*3/2,Math.PI*2); cxt.lineTo(width+x,height+y-radius); cxt.arc(width-radius+x,height-radius+y,radius,0,Math.PI*1/2); cxt.lineTo(radius+x,height+y); cxt.arc(radius+x,height-radius+y,radius,Math.PI*1/2,Math.PI); cxt.closePath(); } /script /body /html
建議大家自己動(dòng)手繪制一個(gè)圓角矩形，這樣有助于對(duì)路徑的掌握。下面我們用這個(gè)函數(shù)來做點(diǎn)其他的事情。繪制2048游戲界面
對(duì)代碼不做過多講解，大家自己研究研究，建議自己動(dòng)手先嘗試寫一下。因?yàn)槲疫@里采用的是硬編碼，所以不是很好，大家也可嘗試優(yōu)化一下。JavaScript Code復(fù)制內(nèi)容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); drawRoundRect(context,200,100,400,400,5); context.fillStyle= #AA7B41 ; context.strokeStyle= #0078AA ; context.stroke(); context.fill(); for(vari=1;i =4;i++){ for(varj=1;j =4;j++){ drawRoundRect(context,200+16*i+80*(i-1),100+16*j+80*(j-1),80,80,5); context.fillStyle= #CCBFB4 ; context.strokeStyle= #0078AA ; context.stroke(); context.fill(); } } } functiondrawRoundRect(cxt,x,y,width,height,radius){ cxt.beginPath(); cxt.arc(x+radius,y+radius,radius,Math.PI,Math.PI*3/2); cxt.lineTo(width-radius+x,y); cxt.arc(width-radius+x,radius+y,radius,Math.PI*3/2,Math.PI*2); cxt.lineTo(width+x,height+y-radius); cxt.arc(width-radius+x,height-radius+y,radius,0,Math.PI*1/2); cxt.lineTo(radius+x,height+y); cxt.arc(radius+x,height-radius+y,radius,Math.PI*1/2,Math.PI); cxt.closePath(); } /script /body /html
運(yùn)行結(jié)果：
這個(gè)圓角矩形的函數(shù)寫好之后，可以自己封裝進(jìn)JS文件里，以后遇到什么好的函數(shù)都可以放進(jìn)去，這樣積累下來，這個(gè)文件就是一套屬于自己的圖形庫和游戲引擎了，是不是非常的酷？其實(shí)游戲制作是Canvas的主要用途，但是要知道每一個(gè)游戲設(shè)計(jì)師都是一個(gè)藝術(shù)家。
繪制微信對(duì)話框
大家可以嘗試著使用Canvas繪制一下微信聊天界面，作為練習(xí)與鞏固。
這里使用到了繪制矩形，繪制圓角矩形，繪制多線條圖形，填充顏色的一些知識(shí)。還有一些 Canvas文本API 我們并沒有說到，所以大家只要能繪制出一個(gè)大概的界面就算合格了。能夠繪制出來，也就基本掌握了Canvas API。其實(shí)上述對(duì)話是生成出來的微信界面生成器網(wǎng)頁版，可謂是微商神器。是不是非常的酷？
這只是暑假花兩天時(shí)間寫的最初版本，還尚未達(dá)到發(fā)布的地步，在我寫本節(jié)的時(shí)候，這個(gè)網(wǎng)頁的界面還正在優(yōu)化中。大家可以嘗試自己動(dòng)手做做，也可以關(guān)注和參考我的這個(gè)小項(xiàng)目github：微信界面生成器。本節(jié)就不再重復(fù)給出界面代碼了。好了，學(xué)到這里基本上已經(jīng)學(xué)完了所有基本的Canvas繪圖的api，大家拿起自己的畫筆，自由的發(fā)揮吧！html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：關(guān)于html5轉(zhuǎn)義實(shí)體字符的實(shí)例教程

下一篇：HTML5實(shí)例教程-網(wǎng)頁表單Form標(biāo)簽的屬性