canvas 绘制七巧板

喜欢ヅ旅行 2022-05-21 12:07 222阅读 0赞

如图, 给出七巧板的各点坐标, 接下来, 通过canvas来绘制这样一个七巧板图形

![70][]

let pos = [    // 获取各个图形的各点坐标, 以及图形颜色
        {angle: [{x:0,y:0}, {x:250,y:0}, {x:0,y:250}],                      color: 'red'},
        {angle: [{x:250,y:0}, {x:375,y:125}, {x:250,y:250}, {x:125,y:125}], color: 'green'},
        {angle: [{x:250,y:0}, {x:500,y:0}, {x:375,y:125}],                  color: 'blue'},
        {angle: [{x:0,y:250}, {x:125,y:125}, {x:125,y:375}, {x:0,y:500}],   color: 'yellow'},
        {angle: [{x:125,y:125}, {x:250,y:250}, {x:125,y:375}],              color: 'pink'},
        {angle: [{x:250,y:250}, {x:500,y:0}, {x:500,y:500}],                color: '#999'},
        {angle: [{x:0,y:500}, {x:250,y:250}, {x:500,y:500}],                color: '#00a2ff'}
    ];
    
    function draw (ctx, pos) {
        for (let i = 0; i < pos.length; i++) {
            let angle = pos[i].angle;
    
            ctx.fillStyle = pos[i].color;
    	ctx.strokeStyle = '#000';
    	ctx.lineWidth = 5;
    
    	ctx.beginPath();
    	ctx.moveTo(angle[0].x, angle[0].y);
    
    	for (let j = 1; j < angle.length; j++) {
    	    ctx.lineTo(angle[j].x, angle[j].y);
    	}
    
    	ctx.closePath();
    	ctx.fill();
    	ctx.stroke();
        }
    }
    let myCanvas = document.getElementById('myCanvas');
    		
    myCanvas.width = '500';
    myCanvas.height = '500';
    let ctx = myCanvas.getContext('2d');
    
    window.onload = function () {
        draw(ctx, pos);
    }

![70 1][]

[70]: /images/20220521/d1a0b8aafd4e45b19329e003219738ef.png
[70 1]: /images/20220521/7a56cf7d78bc4e338cfa347cbd18ce21.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html canvas 绘制倒影,canvas

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

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

相关 canvas绘制七巧板

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

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

相关 Android Canvas绘制七巧板

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

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

相关 canvas绘制七巧板

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

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

相关 canvas 绘制七巧板

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

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

相关 Canvas阴影绘制

阴影的绘制主要依赖以下四个属性： `shadowOffsetX`：阴影x方向的偏移距离 `shadowOffsetY`：阴影y方向的偏移距离 `shadow

港控/mmm°/ 2021年12月15日 00:37/ 0 赞/ 363 阅读

相关 Canvas绘制曲线

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

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

相关 canvas 绘制虚线

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

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

相关 canvas绘制直线

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

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

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

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

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