虐了一下午的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. SendMessage基本认识

    SendMessage基本认识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数PostMessage不同,将一个消息寄送到一个线 ...

  2. ios jsbrige

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. java 操作配置文件 .properties

    package com.dms.common; import java.io.File; import java.io.FileInputStream; import java.io.FileNotF ...

  4. Codeforces 263E

    Codeforces 263E 原题 题目描述:一个\(n \times m\)的矩阵,每格有一个数,给出一个整数\(k\),定义函数\(f(x, y)\): \[f(x, y)=\sum_{i=1} ...

  5. libVirt APIs uris (storage,hypervisors)drivers terminologies,glossary xml VMI format

  6. Michael Kors - Wikipedia, the free encyclopedia

    Michael Kors - Wikipedia, the free encyclopedia Michael Kors From Wikipedia, the free encyclopedia   ...

  7. Hat's Fibonacci（大数，好）

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  8. 【Winform开发2048小游戏】

    先来看一下界面: 游戏帮助类 class GameCore { //游戏地图 private int[,] map = new int[4, 4]; //合并时用到的临时数组 private int[ ...

  9. asp.net软件测试学习

    ormaping类是,将数据操作封装起来的一种数据操作方法,在测试的时候,如果说,insert之后对obj对象赋值赋值,每个属性应该对应自己的objDataRow["REGISTERID&q ...

  10. jquery 点击按钮实现listbox的显示与隐藏，点击其他地方按钮外的地方，隐藏listbox

    本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...