python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板

当前浏览器不支持cnavas

var tangram = [

{

f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}],

color: "#FEF734",

{

f:[{x: 0,y: 0},{x: 400, y: 400},{x: 0, y: 800}],

color: "#224AFB",

{

f:[{x: 800,y: 0},{x: 600, y: 200},{x: 800, y: 400}],

color: "#A82F24",

{

f:[{x: 400,y: 400},{x: 600, y: 200},{x: 800, y: 400},{x: 600, y: 600}],

color: "#141D71",

{

f:[{x: 400,y: 400},{x: 200, y: 600},{x: 600, y: 600}],

color: "#F17E4D",

{

f:[{x: 200,y: 600},{x: 600, y: 600},{x: 400, y: 800},{x: 0, y: 800}],

color: "##EC4F93",

{

f:[{x: 800,y: 400},{x: 400, y: 800},{x: 800, y: 800}],

color: "#6CF8FC",

];

window.onload = function(){

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

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

canvas.width = 800;

canvas.height = 800;

for(var i = 0; i< tangram.length; i++){

ctx.beginPath();

ctx.moveTo(tangram[i].f[0].x, tangram[i].f[0].y);

for (var j= 1; j < tangram[i].f.length; j++){

ctx.lineTo(tangram[i].f[j].x, tangram[i].f[j].y);

}

ctx.closePath();

ctx.fillStyle = tangram[i].color;

ctx.fill();

ctx.lineWidth = 10;

ctx.stroke();

}

//重绘最外层边框

ctx.lineWidth = 20;

ctx.strokeRect(0,0,800,800);

}

python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板相关推荐

python用七巧板图片画个图_canvas练习 - 七巧板绘制
27 28 您的浏览器不支持canvas,请更换29 30 31 //function DrawLine(arr) { 32 ///* 之前这种写法,以为要一个moveTo一个lineTo的,后来发现 ...
易语言图片插入超级列表框_利用PPT制作一个图片抽奖
上课时,为了参加互动的效果,抽奖是一个很好的方法,即能提高学生的学习兴趣也能活跃课堂气氛. 老师们大多使用的课件都是PPT,而PPT实现这种效果有点难度.百度中有介绍如何使幻灯片切换功能实现名字抽奖的 ...
python用七巧板图片画个图_画一个太大而不能放进一个七巧板的图像
您可能不想一次显示多个QImage的数据.很少有屏幕的宽度或高度超过32k像素.在因此,您需要一个抽象类型,它可以在请求读取时生成QImages,可以是偏移量,也可以是不同的缩放因子.在下一个问题 ...
html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI
现在NBA联赛也进行到半决赛了,我们怎么样才能以更快的方法获取NBA的数据呢?这里我们就自己来做一个数据播报的程序文章目录制作NBA数据爬虫捋顺思路编写代码 NBAReporter.py NB ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
python画折线图详解-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
java canvas 打开图片_一步步教你利用Canvas对图片进行处理
前言 Canvas,中文译为"画布",HTML5中新增了元素,可以结合JavaScript动态地在画布中绘制图形. 今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理, ...
能带曲线图绘制python_如何使用python的matplotlib模块画折线图
python是个很有趣的语言,可以在cmd命令窗口运行,还有很多的功能强大的模块.这篇经验告诉你,如何利用python的matplotlib模块画图. 工具/原料 windows系统电脑一台 pyth ...

python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板

python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板相关推荐

最新文章

热门文章