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 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php获取淘宝分类id示例
2014/01/16 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Python无损压缩图片的示例代码
2020/08/06 Python
计算机求职信
2013/12/01 职场文书
先进事迹报告会感言
2014/01/24 职场文书
参观接待方案
2014/03/17 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
银行求职自荐书
2014/06/25 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
软件测试专业推荐信
2014/09/18 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript