canvas绘制七巧板


Posted in Javascript onFebruary 03, 2017

效果如下所示:

canvas绘制七巧板

代码分享:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas七巧板</title>
</head>
<body>
  <canvas id="canvas" style=" border: 1px solid #aaa;display:block;margin:50px auto;"></canvas>
  <script type="text/javascript">
    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'}
    ]
//    定义一个存放绘制路径和颜色的数组
    window.onload=function (){
      var canvas=document.getElementById('canvas');
//      获取canvas
      canvas.width = 800;
      canvas.height = 800;
//      定义画布的宽高
      var context=canvas.getContext('2d');
//      创建画布
      for( var i=0; i<tangram.length; i++){
        draw(tangram[i],context);
//        遍历数组tangram执行函数draw

      }
//      draw这个函数
     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++)
//          遍历数组中的p属性
          cxt.lineTo(piece.p[i].x , piece.p[i].y);
//        画路径到这个坐标
          cxt.closePath();
//          关闭这条打开的路径

          cxt.fillStyle = piece.color;
          cxt.fill();
//          给绘制的形状填充颜色
     }
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
几种tab切换详解
Feb 03 #Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 #Javascript
拖动时防止选中
Feb 03 #Javascript
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP中常用的转义函数
2014/02/28 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php实现登录页面的简单实例
2019/09/29 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
py中的目录与文件判别代码
2008/07/16 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python 字段拆分详解
2019/12/17 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
IT工程师岗位职责
2014/07/04 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
导游词之桂林
2019/08/20 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
Go语言入门exec的基本使用
2022/05/20 Golang
MySQL索引失效场景及解决方案
2022/07/23 MySQL