虐了一下午的canvas

先撸了一个七巧板

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<canvas id="canvas"  style="border:1px solid #ccc; display:block; margin:50px auto;">

</canvas>

<script>

    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},{x:0,y:0}],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 canavs=document.getElementById('canvas');

    canvas.width=800;

    canvas.height=800;

    var context=canvas.getContext('2d');

    for(var i=0;i<tangram.length;i++)

    draw(tangram[i],context)

}

    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++)

            cxt.lineTo(piece.p[i].x,piece.p[i].y);

        cxt.closePath();

        cxt.fillStyle=piece.color;

        cxt.fill();

    }

</script>

</body>

</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. Oracle EBS-SQL (SYS-1): sysadmin_用户职责查询.sql

    select fu.user_name 用户名, fu.description 用户说明, frv.RESPONSIBILITY_NAME 职责名称, REQUEST_GROUP_NAME 报表组, ...

  2. 在CMD命令行下关闭进程的命令

    转载: [重要]在CMD命令行下关闭进程的命令━━━━━━━━━━━━━━━━━━━━━━━━━━ 方法一: 在"运行"中输入:ntsd -c q -pn 程序名字(在MS-Dos ...

  3. Windows平台内核级文件访问

    1.背景     在windows平台下,应用程序通常使用API函数来进行文件访问,创建,打开,读写文件.从kernel32的CreateFile/ReadFile/WriteFile函数,到本地系统 ...

  4. Microsoft Azure 大计算 – 宣布收购 GreenButton

     数据以及令人不可思议的计算能力,正在改变我们日常业务的经营方式,从科学和工程到媒体和金融,各行各业的客户正逐渐意识到什么是可能的.我们对整个基因组进行分析,以研制新药物.我们构建金融和保险模型, ...

  5. i美股投资研报--Michael Kors(IPO版) _Michael Kors（KORS） _i美股

    i美股投资研报--Michael Kors(IPO版) _Michael Kors(KORS) _i美股 i美股投资研报--Michael Kors(IPO版)

  6. Java 覆盖测试工具 ：EclEmma

    http://www.eclemma.org/installation.html#manual EclEmma 2.2.1 Java Code Coverage for Eclipse Overvie ...

  7. 在cmd中输入ls命令出现“ls不是内部或外部命令解决

    今天在学习sass查看目录遇到cmd输入ls提示不是内部命令 解决方法: 新建一个ls.bat文件 内容为: @echo off dir

  8. POJ 3111 K Best(最大化平均值)

    题目链接:click here~~ [题目大意]有n个物品的重量和价值各自是Wi和Vi.从中选出K个物品使得单位重量的价值最大,输出物品的编号 [解题思路]:最大化平均值的经典.參见click her ...

  9. 基于eclipse的mybatis映射代码自动生成的插件

    基于eclipse的mybatis映射代码自动生成的插件 分类: JAVA 数据库 工具相关2012-04-29 00:15 2157人阅读 评论(9) 收藏 举报 eclipsegeneratori ...

  10. JavaScript之arguments.callee

    arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函数,没有名子,无名可调. 这时就可以用argumen ...