虐了一下午的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. Generator & Co

    Generator 搬运自 http://es6.ruanyifeng.com/#docs/generator 如果没有babel等环境也可以在线体验 可以在http://www.es6fiddle. ...

  2. 收藏的技术文章链接（ubuntu，python，android等）

    我的收藏 他山之石,可以攻玉 转载请注明出处:https://ahangchen.gitbooks.io/windy-afternoon/content/ 开发过程中收藏在Chrome书签栏里的技术文 ...

  3. android 获取http网络图片保存png

    1.android 获取网络图片的方式很多,普通网络通信的方式都可以用在获取网络图片上. android   http获取数据常用的方式: 1.Apache接口(HttpClient) 2.标准Jav ...

  4. （6）Xamarin.android google map v2

    原文 Xamarin.android google map v2 Google Map v1已经在2013年的3月开始停止支持了,目前若要在你的Android手机上使用到Google Map,就必须要 ...

  5. 关于httpservletrequest的获取真实的ip

    via 值为: 下面是一些DemoWTP/1.1 GDSZ-PS-GW010-WAP05.gd.chinamobile.com (Nokia WAP Gateway 4.0 CD3/ECD13_C/N ...

  6. android插件化-apkplugdemo源代码阅读指南-10

    阅读本节内容前可先了解 apkplug基础教程 本教程是基于apkplug V1.6.8 版本号编写  最新开发方式以官网为准 可下载最新的apkplugdemo源代码http://git.oschi ...

  7. android 回调

    调函数(callback Function),顾名思义,用于回调的函数.  回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用 ...

  8. 【Android进阶学习】shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  9. Ceph对象存储网关中的索引工作原理<转>

    Ceph 对象存储网关允许你通过 Swift 及 S3 API 访问 Ceph .它将这些 API 请求转化为 librados 请求.Librados 是一个非常出色的对象存储(库)但是它无法高效的 ...

  10. SPDY HTTP2.0

    SPDY(读作“SPeeDY”)是Google开发的基于TCP的应用层协议,用以最小化网络延迟,提升网络速度,优化用户的网络使用体验.SPDY并不是一种用于替代HTTP的协议,而是对HTTP协议的增强 ...