canvas繪制七巧板
更新時(shí)間：2017年02月03日 15:07:32 作者：極客小兵
本文主要分享了canvas繪制七巧板的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
效果如下所示：
代碼分享：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas七巧板</title>
</head>
<body>
<canvas id="canvas" style=" border: 1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
var tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
// 定義一個(gè)存放繪制路徑和顏色的數(shù)組
window.onload=function (){
var canvas=document.getElementById('canvas');
// 獲取canvas
canvas.width = 800;
canvas.height = 800;
// 定義畫布的寬高
var context=canvas.getContext('2d');
// 創(chuàng)建畫布
for( var i=0; i<tangram.length; i++){
draw(tangram[i],context);
// 遍歷數(shù)組tangram執(zhí)行函數(shù)draw
}
// draw這個(gè)函數(shù)
function draw(piece,cxt){
cxt.beginPath();
// 開始路徑的創(chuàng)建
cxt.moveTo( piece.p[0].x , piece.p[0].y );
// 從這個(gè)坐標(biāo)開始
for( var i=1; i<piece.p.length; i++)
// 遍歷數(shù)組中的p屬性
cxt.lineTo(piece.p[i].x , piece.p[i].y);
// 畫路徑到這個(gè)坐標(biāo)
cxt.closePath();
// 關(guān)閉這條打開的路徑
cxt.fillStyle = piece.color;
cxt.fill();
// 給繪制的形狀填充顏色
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
html頁面加載之后的事件如何處理，使用js中的window.onload便可輕松做到，需要的朋友可以了解下2013-10-10
JavaScript之BOM?location對象+navigator對象+history?對象
這篇文章主要介紹了JavaScript?BOM中的?location對象、navigator對象、history?對象，下面圍繞他們的相關(guān)語法及各種資料展開文章詳細(xì)內(nèi)容,需要的小伙伴可以參考一下，希望對大家有所幫助2021-12-12
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
本篇文章是基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示，當(dāng)點(diǎn)擊不同導(dǎo)航菜單實(shí)現(xiàn)當(dāng)前點(diǎn)擊的菜單是高亮的，有需要的朋友可以關(guān)注下本文2015-08-08
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔...2007-06-06
JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能,涉及javascript針對表單提交內(nèi)容的獲取、判斷、焦點(diǎn)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于express異步函數(shù)異常捕獲的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
js this函數(shù)調(diào)用無需再次抓獲id，name或標(biāo)簽名
this就是你當(dāng)前要執(zhí)行的js所抓獲的節(jié)點(diǎn)，這樣在js里就可以不用document.getElement之類的寫法來抓獲id，name或標(biāo)簽名，具體示例如下2014-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義tabBar組件開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11