canvas 绘制七巧板

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

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);
}

canvas 绘制七巧板相关推荐

HTML绘制七巧板,canvas绘制七巧板
> 脚本语言 > > canvas绘制七巧板 2017-04-19 14:10 出处:清屏网人气: 在上一节中,我们了解了如何使用canvas绘制线段,这一节,我们使用canvas ...
java实现七巧板问题_[Java教程]canvas,绘制七巧板
[Java教程]canvas,绘制七巧板 0 2016-11-03 13:00:04 //定义一个数组变量,分别代表七巧板的七块 //每一部分是一个类的对象,每一部分包含一个p, //p也是一个数组, ...
canvas绘制七巧板
首先推荐的课程学习是<炫丽的倒计时效果Canvas绘图与动画基础>,感谢liuyubobobo的讲解. 偶然之间发现了这门canvas的课程,本来一直都在寻找Canvas教程,学习课程之后 ...
python七巧板代码_canvas绘制七巧板
在上一节中,我们了解了如何使用canvas绘制线段,这一节,我们使用canvas绘制七巧板. html代码如下所示,和第一节中代码一致: Canvas绘制七巧板 #canvas{ border: 1p ...
python绘制七巧板_CSS3制作七巧板动画
欢迎访问我的博客GISer空间. 1. CSS3:每块板作为为一个dom元素. 1.1 用一个容器和七个元素来表示七块板. 1.2 通过CSS3的transform的平移.缩放.旋转.变形多种操作来确 ...
Html5画布绘制七巧板
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...

canvas 绘制七巧板

canvas 绘制七巧板相关推荐

最新文章

热门文章