画布绘制七巧板

效果如下所示：

代码分享：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题画布七巧板/title/head body canvas id=' canvas ' style=' border : 1px solid # AAA；显示：块；余量：50px汽车；/canvas脚本类型=' text/JavaScript ' var tangram=[{ p :[{ x :0，y:0}，{x:800，y:400}，{x:400，y:400}]，color:'#caff67'}，{ p 33:[{ x :0，y:0}，{ x 3333333336 }定义一个存放绘制路径和颜色的数组窗户。onload=function(){ var canvas=document。getelementbyid(' canvas ')；//获取canvas . width=800 canvas . height=800/定义画布的宽高var上下文=canvas。get context(' 2d ')；//创建画布for(var I=0；itagram . lengthi){ draw(七巧板[i]，上下文);//遍历数组七巧板执行函数绘制}//绘制这个函数函数draw(piece，cxt){ cxt。begin path()；//开始路径的创建cxt.moveTo(piece.p[0]).x，piece.p[0].y)；//从这个坐标开始for(var I=1；IPI欧洲经委会。长度；i )//遍历数组中的p属性cxt.lineTo(piece.p[i]).x，piece.p[i].y)；//画路径到这个坐标cxt。close path()；//关闭这条打开的路径cxt。FillStyle=piece。颜色；cxt。fill()；//给绘制的形状填充颜色} }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！