虐了一下午的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. easyui datagrid 列的内容超出所定义的列宽时,自动换行

    定义表单  nowrap="false"可以使得列中的内容超出所定义的列宽是就会自动换行pagination : true, // 当true时在DataGrid底部显示一个分页工 ...

  2. 内核级HOOK的几种实现与应用

    实现内核级 HOOK 对于拦截.分析.跟踪系统内核起着致关重要的作用.实现的方法不同意味着应用侧重点的不同.如想要拦截 NATIVE API 那么可能常用的就是 HOOK SERVICE TABLE  ...

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

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

  4. cdoj 韩爷的情书 有向图 欧拉路径

    //欧拉回路 解法:首先判断欧拉回路存在性:1.连通 2.没有出度入度相差大于1的点 3.如果有出度入度相差等于1的点那么必须有两个,一个出度大于入度作为起点,一个入度大于出度作为终点. 在确定了起点 ...

  5. A Simple Problem with Integers(线段树，区间更新)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 83822   ...

  6. iOS开发基本须要

        iOS开发基本须要 1 准备好对应的硬件和软件配置------基于Intel处理器的Mac操作系统 2 具有C++,Java或其它面向对象编程语言的开发经验 3 最新的iphone SDK的下 ...

  7. Dreamweaver中打开CodeSmith文件

    电脑环境:Windows2008+Dreamweaver 8英文版本 问题描述:Dreamweaver中默认打开文档时不支持打开CodeSmith模板文件对应的.cst后缀名文件,截图如下: 解决步骤 ...

  8. 核心基础以及Fragment与Activity传递数据完整示例

    MainActivity如下: package cc.testsimplefragment0; import android.os.Bundle; import android.app.Activit ...

  9. Lua for Windows入门01

    由于项目紧急,我都没来得及研究lua的基本知识就直接持枪上阵了.在实施编写的过程中,却次发现编程语言如此之美,第一次. 随着Lua+for+Windows+5.1.4-45版本的完全安装,最后跳出了一 ...

  10. Javascript类型检测

    原地址 http://www.cnblogs.com/fool/archive/2010/10/07/javascrpt.html 开门见山,我们先来看一下代码: var is = function ...