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 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue-test-utils初使用详解
May 23 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
js实现搜索提示框效果
Sep 05 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
用javascript制作qq注册动态页面
Apr 14 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
10 个经典PHP函数
2013/10/17 PHP
php导入导出excel实例
2013/10/25 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
园长自我鉴定
2013/10/06 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
捐款倡议书范文
2014/02/02 职场文书
社区党员公开承诺书
2014/08/30 职场文书
英文投诉信格式
2015/07/03 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
python小型的音频操作库mp3Play
2022/04/24 Python