canvas绘制七巧板

清疚 2022-06-08 11:08 218阅读 0赞

## canvas绘制七巧板 ##

效果：  
![这里写图片描述][SouthEast]  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</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"}, ] window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); for(var i=0;i<tangram.length;i++) draw(tangram[i],context) } function draw(piece, ctx) { var lineLength = piece.p.length; ctx.beginPath(); ctx.moveTo(piece.p[0].x, piece.p[0].y); for (var i = 1; i < lineLength; i++) { ctx.lineTo(piece.p[i].x, piece.p[i].y); } ctx.closePath(); ctx.fillStyle = piece.color; ctx.fill(); } </script>
    </body>
    </html>

end、、、

[SouthEast]: /images/20220608/d1211ac6ebc64a159f96f06bd31fcaa7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 259 阅读

相关 canvas绘制七巧板

首先推荐的课程学习是《[炫丽的倒计时效果Canvas绘图与动画基础][Canvas]》，感谢liuyubobobo的讲解。偶然之间发现了这门canvas的课程，本来一直都在

落日映苍穹つ/ 2022年08月12日 01:17/ 0 赞/ 232 阅读

相关 Android Canvas绘制七巧板

心血来潮，封装了一个绘制彩色多边形的方法，并用这个方法绘制了一个七巧板（感觉绘制华容道太简单了）代码如下： public class CanvasPuz

我会带着你远行/ 2022年07月15日 14:46/ 0 赞/ 216 阅读

相关 canvas绘制七巧板

canvas绘制七巧板效果： ![这里写图片描述][SouthEast] 代码： <!DOCTYPE html> <html lang="en

清疚/ 2022年06月08日 11:08/ 0 赞/ 219 阅读

相关 canvas 绘制七巧板

如图, 给出七巧板的各点坐标, 接下来, 通过canvas来绘制这样一个七巧板图形 ![70][] let pos = [ // 获取各个图形的各点坐标, 以

喜欢ヅ旅行/ 2022年05月21日 12:07/ 0 赞/ 233 阅读

相关 Canvas绘制曲线

文章目录圆弧贝塞尔曲线圆弧圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 co

深碍√TFBOYSˉ_/ 2021年12月14日 13:49/ 0 赞/ 636 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读

相关 canvas绘制直线

说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 s

迈不过友情╰/ 2021年07月24日 16:57/ 0 赞/ 524 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 549 阅读