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 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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单例模式实现方法分析
2015/03/14 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
vue-cli配置文件——config篇
2018/01/04 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Python set常用操作函数集锦
2017/11/15 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
公司财务自我评价分享
2013/12/17 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL