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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 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 图片上添加透明度渐变的效果
2009/06/29 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
动态加载js的几种方法
2006/10/23 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
将Python代码打包为jar软件的简单方法
2015/08/04 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python在非root权限下的安装方法
2018/01/23 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
新学期班主任寄语
2014/01/18 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
免职通知
2015/04/23 职场文书