python七巧板代码_canvas绘制七巧板

在上一节中，我们了解了如何使用canvas绘制线段，这一节，我们使用canvas绘制七巧板。

html代码如下所示,和第一节中代码一致：

Canvas绘制七巧板

#canvas{

border: 1px solid #aaa;

text-align: center;

}

当用户浏览器不支持Canvas,请更换浏览器重试！

直接上代码，js代码如下所示：

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"}

];//七巧板的七块图形，p为各顶点坐标，color为颜色

window.onload = function () {

var canvas = document.getElementById("canvas");

if (canvas.getContext("2d")) {//判断浏览器是否支持canvas

var context = canvas.getContext("2d");

for (var i = 0; i < tangram.length; 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 < piece.p.length; i++) {

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

}

cxt.closePath();

cxt.fillStyle = piece.color;

cxt.fill();

cxt.strokeStyle = "black";

cxt.lineWidth = 5;

cxt.stroke();

}

} else {

alert("不支持canvas,请更换浏览器！")

}

};

最终效果如下所示：

七巧板

python七巧板代码_canvas绘制七巧板相关推荐

用python画七巧板_canvas绘制七巧板
效果如下所示: 代码分享: Canvas七巧板 var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'}, { ...
python热力图代码_python绘制热力图heatmap
本文实例为大家分享了python绘制热力图的具体代码,供大家参考,具体内容如下 python的热力图是用皮尔逊相关系数来查看两者之间的关联性. #encoding:utf-8 import numpy ...
python彩虹代码_python绘制彩虹图
本文实例为大家分享了python绘制彩虹图的具体代码,供大家参考,具体内容如下 from turtle import * #控制彩虹路径 def path(pen, r, g, b): pen.pen ...
Python一行代码即可绘制和弦图
步骤 1.和弦图简介 1.1.和弦图构成 1.2.和弦图应用场景 2.和弦图Python库 3.chord的安装及使用 1.和弦图简介和弦图(chord Diagram),是一种显示矩阵中数据间相互 ...
python七巧板三角形_canvas基础入门（二）绘制线条、三角形、七巧板
复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始 canvas绘制直线先认识几个函数 beginPath():开始一条路径,或重置当前的路径 moveTo(x,y):用于规 ...
HTML绘制七巧板,canvas绘制七巧板
> 脚本语言 > > canvas绘制七巧板 2017-04-19 14:10 出处:清屏网人气: 在上一节中,我们了解了如何使用canvas绘制线段,这一节,我们使用canvas ...
python turtle画熊-Python使用turtle库绘制小猪佩奇(实例代码)
turtle(海龟)是Python重要的标准库之一,它能够进行基本的图形绘制.turtle图形绘制的概念诞生于1969年,成功应用于LOGO编程语言. turtle库绘制图形有一个基本框架:一个小海龟 ...
python画图代码七彩蟒蛇-Python实现七彩蟒蛇绘制实例代码
本文主要研究的是Python编程turtle的实例,绘制一个七彩蟒蛇..具体如下. 第2周的课后练习里,有一道题目,要求修改"蟒蛇绘制"程序,对Python 蟒蛇的每个部分采用不同 ...
python turtle画彩虹-Python利用turtle库绘制彩虹代码示例_天津SEO
天津SEO RGB模型:光的三原色,共同决定色相 HSB/HSV模型:H色彩,S深浅,B饱和度,H决定色相需要将HSB模型转换为RGB模型代码示例: #-*- coding:utf-8 –*- f ...

python七巧板代码_canvas绘制七巧板

python七巧板代码_canvas绘制七巧板相关推荐

最新文章

热门文章