python七巧板绘图_记录一次canvas绘图（七巧板）

效果图如上

代码如下：

canvas

.canvas_box{

border:1px solid #ddd;

display: block;

margin: 0 auto;

}

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:'#ef3d1'},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9fa1a'},

{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

draw(tangram[i],context);

}

function draw(piece,cxt){

cxt.beginPath();

cxt.moveTo(piece.p[0].x,piece.p[0].y);

for(var i=1;i

cxt.lineTo(piece.p[i].x,piece.p[i].y);

}

cxt.closePath();

cxt.fillStyle = piece.color;

cxt.fill();

cxt.strokeStyle = '#000';

cxt.lineWidth = 3;

cxt.stroke();

}

python七巧板绘图_记录一次canvas绘图（七巧板）相关推荐

圆头像微信小程序绘图_微信小程序canvas画圆头像
wxml: wxss: canvas{ width:375px; height:100px } js const headImge = 'https://ss0.bdstatic.com/70cFvH ...
python的打开_记录
1. 2.7版本,安装了2.7,可以在命令符里面输入cmd,然后输入python,进入python的工作环境. 2. 3.6版本 ,anaconda版本,在F:\qhpython里边找到python. ...
python bokeh教程_使用Jupyter Notebook+bokeh绘图入门完整步骤
原标题:使用Jupyter Notebook+bokeh绘图入门完整步骤 Bokeh是一款基于浏览器的交互式绘图工具,在IPython Notebook中具有非常好的表现. 安装anaconda3,单 ...
微信小程序和python数据交互_记录 python flask 与微信小程序交互
一.小程序向flask传递参数 1.小程序将请求数据转换为JSON格式 wx.request({ url: 'http://127.0.0.1:8080/query_user', data: { go ...
传智播客 python 东哥_记录与传智播客的py交易（AI+python）
该楼层疑似违规已被系统折叠隐藏此楼查看此楼下面开始补函数部分: 当有很多需要重复执行的功能时,代码的重复度就会很大,此时代码就非常的冗余,为了提高代码的利用率以及降低冗余度.使代码更具有模块化(这 ...
ios绘图_使用Pencilkit轻松将绘图功能添加到ios应用
ios绘图 The PencilKit framework was introduced by Apple in iOS 13. It gives developers the ability to ...
python 柱状图间距_专题第18篇：Python 绘图入门
我的施工之路 1我的施工计划2数字专题3字符串专题4列表专题5流程控制专题6编程风格专题7函数使用8面向对象编程(上篇)9面向对象编程(下篇)10十大数据结构11包和模块使用总结12Python正则专 ...
python画建筑_专题 | Python 绘图入门
我的施工之路 Python 绘图入门这是施工系列第18篇,同时也进入到一个新的阶段:Python绘图篇.作为绘图模块的第一篇,与大家一起过过最基本的Python绘图原理. 掌握基本的绘图原理很有必要 ...
java实现七巧板问题_[Java教程]canvas,绘制七巧板
[Java教程]canvas,绘制七巧板 0 2016-11-03 13:00:04 //定义一个数组变量,分别代表七巧板的七块 //每一部分是一个类的对象,每一部分包含一个p, //p也是一个数组, ...

python七巧板绘图_记录一次canvas绘图（七巧板）

python七巧板绘图_记录一次canvas绘图（七巧板）相关推荐

最新文章

热门文章