虐了一下午的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. 异步流程控制库GoWithTheFlow

    异步流程控制库GoWithTheFlow 一个尾触发方式来控制异步流程的库, 有seq(顺序执行) par(同步执行) 两种方法 博客 http://notes.jetienne.com/2011/0 ...

  2. SLC、eSLC、MLC、eMLC的区别

    SLC.eSLC.MLC.eMLC的区别 作为SSD主要元件的NAND闪存,我们经常见到的有SLC和MLC两种,甚至还细分出eSLC和eMLC等等,现在我们谈一下他们之间的区别.       SLC全 ...

  3. javascript数组去重算法-----4（另一种写法）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Effective C++ Item 36 绝不又一次定义继承而来的 non-virtual 函数

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:绝对不要又一次定义继承而来的 non-virtual 函数 --> Item 7 ...

  5. java--jsp+ssh+select动态结合数据和选择(解)

    在三层体系结构和jsp合并项目,如何实现select动态绑定数据和动态选择指定的行?让我们来看看下面的: 1.首先定义一个Bean分类.它用于实例select的结合数据中的每一个id和name: pu ...

  6. 给定数组A，大小为n，现给定数X，判断A中是否存在两数之和等于X

    题目:给定数组A,大小为n,现给定数X,判断A中是否存在两数之和等于X 思路一: 1,先采用归并排序对这个数组排序, 2,然后寻找相邻<k,i>的两数之和sum,找到恰好sum>x的 ...

  7. ubuntu菜单面板丢了怎么找回

    我的ubuntu菜单面板丢了.   我的ubuntu用的是gnome桌面环境,桌面环境分为三个区域: 1.菜单面板 (1)三个主菜单:应用程序,位置,系统. (2)快速启动区:菜单面板中间的部分称为快 ...

  8. DataSet和DataTable详解

    先构建一个结构与用户请求数据结构相同的DataTable,然后将用户的请求数据填充到构建好的DataTable中,最后将DataTable添加到DataSet中. DataTable,,DataCol ...

  9. java堆溢出的小栗子

    package com.xiaoysec.test; import java.util.ArrayList; import java.util.List; /** *VM Args:-verbose: ...

  10. mysql在查询结果中增加排序字段

    ELECT userId , () AS runRank , mostFast1 FROM user_info, ()) b WHERE mostFast1 IS NOT NULL ORDER BY ...