手机版

画布绘制七巧板

时间:2021-09-06 来源:互联网 编辑:宝哥软件园 浏览:

效果如下所示:

代码分享:

!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以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

版权声明:画布绘制七巧板是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。