HTML绘制七巧板,canvas绘制七巧板

> 脚本语言 > >

canvas绘制七巧板

2017-04-19 14:10　出处：清屏网　人气：

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

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

==>

border: 1px solid #aaa;

text-align: center;

}=="800">

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

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

var tangram = [

{}, {}, {}], color: "#caff67"},

{}, {}, {}], color: "#67becf"},

{}, {}, {}, {}], color: "#ef3d61"},

{}, {}, {}], color: "#f9f51a"},

{}, {}, {}, {}], color: "#a594c0"},

{}, {}, {}], color: "#fa8ecc"},

{}, {}, {}], 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,请更换浏览器！")

}

};

最终效果如下所示：

七巧板

分享给小伙伴们：

本文标签：

canvas，七巧板/">canvas，七巧板

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻

HTML绘制七巧板,canvas绘制七巧板相关推荐

【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
openlayers3线段添加闪烁_openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题...
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
java实现七巧板问题_[Java教程]canvas,绘制七巧板
[Java教程]canvas,绘制七巧板 0 2016-11-03 13:00:04 //定义一个数组变量,分别代表七巧板的七块 //每一部分是一个类的对象,每一部分包含一个p, //p也是一个数组, ...
canvas绘制七巧板
首先推荐的课程学习是<炫丽的倒计时效果Canvas绘图与动画基础>,感谢liuyubobobo的讲解. 偶然之间发现了这门canvas的课程,本来一直都在寻找Canvas教程,学习课程之后 ...
python绘制七巧板_CSS3制作七巧板动画
欢迎访问我的博客GISer空间. 1. CSS3:每块板作为为一个dom元素. 1.1 用一个容器和七个元素来表示七块板. 1.2 通过CSS3的transform的平移.缩放.旋转.变形多种操作来确 ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
android canvas绘制圆角_Android自定义View撸一个渐变的温度指示器(TmepView)
秦子帅明确目标,每天进步一点点..... 作者 | andy 地址 | blog.csdn.net/Andy_l1/article/details/82910061 1.概述自定义View对需要 ...

HTML绘制七巧板,canvas绘制七巧板

HTML绘制七巧板,canvas绘制七巧板相关推荐

最新文章

热门文章