虐了一下午的canvas

先撸了一个七巧板

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7.  
  8. <body>
  9. <canvas id="canvas"  style="border:1px solid #ccc; display:block; margin:50px auto;">
  10. </canvas>
  11.  
  12. <script>
  13.     var tangram=[
  14.         {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
  15.         {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800},{x:0,y:0}],color:'#67becf'},
  16.         {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
  17.         {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
  18.         {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
  19.         {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
  20.         {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'},
  21.     ]
  22. window.onload=function() {
  23.     var canavs=document.getElementById('canvas');
  24.  
  25.     canvas.width=800;
  26.     canvas.height=800;
  27.  
  28.     var context=canvas.getContext('2d');
  29.     for(var i=0;i<tangram.length;i++)
  30.     draw(tangram[i],context)
  31.  
  32. }
  33.     function draw(piece,cxt){
  34.  
  35.         cxt.beginPath();
  36.         cxt.moveTo(piece.p[0].x,piece.p[0].y);
  37.         for(var i=1;i<piece.p.length;i++)
  38.             cxt.lineTo(piece.p[i].x,piece.p[i].y);
  39.         cxt.closePath();
  40.  
  41.         cxt.fillStyle=piece.color;
  42.         cxt.fill();
  43.     }
  44. </script>
  45.  
  46. </body>
  47. </html>

知道了canvas绘图其实是在canvas.getContext('2d')环境里进行的，要先声明之。

绘图分两个步骤，首先描绘路径轨迹，然后渲染填充。

在页面中存在绘制多个图形的情况下，避免各个路径之间互相干扰，要把每段完整的路径用beginPath()和closePath()包围起来保证代码的完整性。

值得一提的是在路径末端加了closePath()后，绘制的路径会自动收尾封闭，即如果绘制了三角形的两条边，那么closePath()会自动补全第三条边使图形成为封闭的三角形。

其中绘制圆形路径用arc(x,y,r,0,2*Math.PI，true),其中xy为圆心坐标，r为半径，0为起点，2*Math.PI为终点，true为逆时针方向绘制该圆

圆形解剖：

将路径变成线条使用stroke()，用lineWidth属性设置线条的粗细，用strokeStyle设置颜色；

填充路径用fill()，用fillStyle设置填充色。

吃饭，未完待续。。。

[学习笔记]HTML5之canvas的更多相关文章

  1. HTML5学习笔记----html5与传统html区别

    一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...

  2. W3Cschool学习笔记——HTML5基础教程

    HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独 ...

  3. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  4. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  5. 前端学习笔记--HTML5

    网页的优点(客户端为网页)(B/S)模式 开发成本低) 不需要安装 无需更新 跨平台(最重要)可以有效的减小开发成本 传统的为C/S模式,开发成本高 前端工程师负责写网页的源代码,而浏览器负责把网页渲 ...

  6. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  7. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  8. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  9. Unity3D之UGUI学习笔记（一）：UGUI介绍以及Canvas

    UGUI是Unity3D4.6官方提供的UI系统,支持2D和3D UI的开发. Unity3D UI史 OnGUI 在Unity4.6之前,官方提供的是OnGUI函数来开发UI界面,当然问题也比较多, ...

随机推荐

  1. office软件卸载

    因为工具是微软出的,并且对应的是每一个版本,所以这里我给大家说下每个版本的对应卸载工具,和卸载方法. office2013卸载 下载对应卸载工具,安装工具,比如你的是2013版本的office,那么下 ...

  2. android ViewHolder 使用

    android中使用ListView   ExpandableListView  数据适配器adapter很多都是自己定义,自己定义数据适配器时,要重写getView.重写getView为了不让每次调 ...

  3. J2SE知识点摘记(二十四)

     覆写hashCode() 在明白了HashMap具有哪些功能,以及实现原理后,了解如何写一个hashCode()方法就更有意义了.当然,在HashMap中存取一个键值对涉及到的另外一个方法为equa ...

  4. 字符串经典的hash算法

    1 概述 链表查找的时间效率为O(N),二分法为log2N,B+ Tree为log2N,但Hash链表查找的时间效率为O(1). 设计高效算法往往需要使用Hash链表,常数级的查找速度是任何别的算法无 ...

  5. CC++初学者编程教程(1) Visual Stduio2010开发环境搭建

    Visual Studio是微软公司推出的开发环境.是目前最流行的Windows平台应用程序开发环境. Visual Studio 2010版本于2010年4月12日上市,其集成开发环境(IDE)的界 ...

  6. Unix/Linux环境C编程入门教程(10) SUSE Linux EnterpriseCCPP开发环境搭建

    安装SUSE企业版以及搭建C/C++开发环境 1.      SUSELinux Enterprise是一款服务器操作系统,异常稳定. 2.设置虚拟机类型. 3.选择稍后安装操作系统. 4.选择SUS ...

  7. #include <algorithm>

    1 adjacent_find 查找重复的元素 2 find_if 查找符合条件的第一个元素 3 find_if_not 查找不符合条件的第一个元素 4 for_each 可以遍历每一个元素 5 pa ...

  8. select option 下拉多选单选bootstrap插件使用总结

    <select id="example-getting-started" multiple="multiple"> <option value ...

  9. 使用 NuGet 管理项目库

    使用 NuGet 管理项目库 Phil Haack 本文转载自:http://msdn.microsoft.com/zh-cn/magazine/hh547106.aspx 无论多么努力,Micros ...

  10. 阿里P8分享：关于做事方式与做事态度

    转载:http://www.neitui.me/y/1019 阿里P8分享:关于做事方式与做事态度贴图1: 贴图2: 贴图3: