我们知道html在h5出之前就仅仅只是一个标签，一个标记，语义化并不强，后来新增的标签如video,audio都是语义化更强（让人一看就懂是什么东西，反正我是这么理解的，一个div不代表着什么），本身自带功能的标签（这个功能别问我怎么弄出来的，是浏览器自身内核渲染出来的），就一句话，这个标签就有这样的功能，当然需要定制化外观或功能也可以自己写。而画布其实也一样。简单的理解就是一张布，一张一尘不染的布，等待各位奋笔挥毫。

画布很简单就是一个标签<canvas></canvas>;

一、那首先画布能干什么呢？

这里先说下自然界一切的图形外观其实都是由最最简单的点线矩形三角等等基本的东西组成的，很多看似很复杂的图形其实都是由这些基本图形通过平移、旋转、缩放等等实现的，h5也不例外。

h5的画布能做的东西其实你可以想象成一只笔，而且这只笔只能画几个基本图形，包括什么呢？

1、圆形，点，弧度

一个基本例子：cxt.arc(x,y,r,0,Math.PI*2,true);

对应的是这个圆的圆形x,y坐标,r半径,起始角，结束角，顺或逆时针，true是逆时针，起始角0度在X轴正方向。（详细点可以看这个图）

写个简单的例子：（画一个最最简单的圆）

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");         //这部分后面说明，没什么，画布画东西都需要的，设置基础环境，跟我们基础设施一样，要打电话发短信得有基站，要坐地铁得有轨道等等     

cxt.fillStyle="#FF0000";            //填充的颜色

cxt.beginPath();                    //开始画，开始路径

cxt.arc(70,18,15,0,Math.PI*2,true);  //上面讲的核心，设置圆的各项属性，只有这里才是核心，其他都是没啥意思的

cxt.closePath();           //关闭路径，这些后面细说

cxt.fill();                //画完的填充方式：fill很明显就是充满填满，还有空心圆的cxt.strock();后面你会发现不少都会用到，这里就先说到这

2、矩形，填充

基本的形式：

空矩形：ctx.strokeRect(20,20,150,100);

被填充的矩形：cxt.fillRect(0,0,150,75);

没什么好说的，无非就是矩形原点（记住了是左上角的点）坐标，长跟宽而已。

接下来重要的事情说三遍，核心、核心、核心。这里就仅仅是核心的那一句，其他的呵呵，我肯定不会告诉你上面有个很类似的了。

3、线条、路径

基本的形式：

cxt.moveTo(10,10);  //从哪个点移动

 cxt.lineTo(150,50);  //画线到哪个点

cxt.lineTo(10,50);

       cxt.stroke(); //实际的把线给画出来，默认颜色是黑色，可以理解成一个play或是run,前面的只是定义，这个才是根据定义实实际际的画出来。

上面这些都只是画布核心，需要画的图形。

但是单独只是把画布选择出来然后直接写这些的话，是画不出任何东西的，为什么呢？首先你没有定义要在怎样的环境下画，即画布本身，接下来还下指令让画布开始画以及什么时候结束画。

具体如下：

同样以画线条为例：

var c=document.getElementById("myCanvas");   //常规的js选择，用jq也可以且更方便些，兼容性也好一些

var ctx=c.getContext("2d");                  //把画布设置成一个二维的环境，这里你可能会问是不是可以设置成3d，很遗憾，目前canvas还不可以

ctx.beginPath();                             //开始画了，这里虽然是开始路径的意思，但无论画弧画线画其他都是要的

ctx.moveTo(20,20);

ctx.lineTo(20,100);        //画第2根线

ctx.lineTo(70,100);        //画第2根线，这里画多少根线看你需求，你构思中需要画几根、怎么画都在这。

ctx.strokeStyle="green";   //设置线条的颜色，这里设置属性的后面再说
ctx.stroke();              //线条实际画出来

4、渐变

首先渐变你可以理解成一个矩形，也可以理解成一个路径，它的意思是从某种颜色（或是透明度，主要是颜色吧）渐渐的过渡到另一种颜色。

基本的形式：   （一些是画布基本设置，为了方便我就不分开了）

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");//呐，这是公共的，画布要画东西都需要这个，即设置画布环境
cxt.createLinearGradient(0,0,175,50);   //设置线性渐变
grd.addColorStop(0,"#FF0000");          //颜色1
grd.addColorStop(1,"#00FF00");          //颜色2
cxt.fillStyle=grd;                      //告诉画布填充的类型

5、插入图片

这个没想到吧？呵呵，没错画布不止是我们自己画，也可以把别人已经画好的引用到我们的画里面，当然这个别人画好的不是画，是图片，照片也是OK的，只要html能解析的图片格式，都可以。

那具体是怎样的格式呢？（跟上面的一样，我把基本格式先贴一下）

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);  //这里说下，插入的图片，放的x坐标，y坐标

这个呢？其实跟我们写html引入网页原理是一样的，都只是引入一个链接，这个链接直指数据库里某一张图片。相信各位看到src都有种亲切感吧= =

二、好了，画布能干什么，基本都在上面了，接下来先做个小总结，我把各个核心属性稍微总结一下：

cxt=c.getContext("2d"); 设置画布为2d环境，目前还没有3d，当然你也可以教教我3d的画要怎么画，美术不好= =

画线：
moveTo(0,0)：从什么开始移动，开始画线条
lineTo(x,y)：把线条要画到哪里，这两个基本都是成对出现的，但lineTo也有moveTo的属性，就是当你用lineTo画到终点时，这个终点也可以当成下个lineTo的起点，所以一个moveTo可以对应一个lineTo

画圆：cxt.arc(x,y,r,0,Math.PI*2,true);  不细说了，触类旁通

画矩形：

空矩形：ctx.strokeRect(20,20,150,100);

被填充的矩形：cxt.fillRect(0,0,150,75);

画渐变：

createLinearGradient(x,y,l,h): 定义线性渐变
grd.addColorStop(0,"#FF0000"); 渐变色       
grd.addColorStop(1,"#00FF00");
插入图：
var img=new Image();

img.src="flower.png";
drawImage(img,0,0)：画布插入图片

其他：

fillstyle：填充类型  可以是颜色也可以是渐变

填充方式：

ctx.stroke(); 空心填充，无论圆，矩形等等填充的都是空心的

ctx.fill(); 实心填充

画布基础环境：

var cxt=c.getContext("2d");设置画布基础环境为二维的。

三、啰嗦了这么多，没有实干怎么行呢？嘿嘿，自己捣鼓了一个程序，叫做自由自在的小球球，具体代码如下：最后啰嗦下，画布各项属性都是靠js代码来设置的，主体就一个canvas标签。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvasDemo1</title>

    <style>

        html,body,canvas{margin:0;padding:0}

        body{overflow:hidden}

    </style>

    <script>

        window.onload=function(){

            (function canvas1(){

                var oCanvas=document.getElementsByTagName('canvas')[0];

                var ctx=oCanvas.getContext('2d');

                var colorArr=["#E08031","#199475","#99CC99","#09C","#096"];

                var x,y,r,xr,yr,d;

                var loveArr=[];

                var w=window.innerWidth;

                var h=window.innerHeight;

                oCanvas.width=w;

                oCanvas.height=h;

                function random(min,max){

                    return Math.random()*(max-min)+min;   //数学上的random()是返回一个比例值

                }

                function Love(){}

                Love.prototype={

                    init:function(){

                        //这4个是基础定义，设置球初始坐标，初始大小及颜色

                        this.r=random(10,15);

                        this.x=random(this.r,w-this.r);

                        this.y=random(this.r,h-this.r);

                        this.color=colorArr[Math.floor(random(0,5))];

                        //设置球移动的速率

                        this.xr=random(-5,5);

                        this.yr=random(-5,5);

                    },

                    draw:function(){ //画布基本操作，这里是画一个小球

                        ctx.beginPath();

                        ctx.arc(this.x,this.y,this.r,0,Math.PI*2);

                        ctx.fillStyle=this.color;

                        ctx.fill();

                    },

                    move:function(){   //小球移动

                        this.x+=this.xr;

                        this.y+=this.yr;

                        (this.x+this.r>=w||this.x-this.r<=0)?this.xr=-this.xr:null; //边缘碰撞判定

                        (this.y+this.r>=h||this.y-this.r<=0)?this.yr=-this.yr:null;

                        this.draw();

                    }

                };

                function create(){   //画小球

                    var bubble=new Love();

                    bubble.init();

                    bubble.draw();

                    loveArr.push(bubble);//把每个小球对象存进数组里面

                }

                for(var i=0;i<50;i++){  //一次性画50个，修改画布上的小球数目也从这里效果修改

                        create();

                    }

                var time=setInterval(function(){

                    ctx.clearRect(0,0,w,h); //清空画布

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

                        loveArr[i].move();

                        //把之前存进数组的小球对象数据一个个拿出了（遍历），并做了一个预先设计好的位移

                    }

                },1000/60);

                oCanvas.onclick=function(){

                    clearInterval(time);

                }

            })();

        }

    </script>

</head>

<body>

<canvas></canvas>

</body>

</html>

H5之画布canvas小记，以及通过画布实现原子无规则运动的更多相关文章

  1. HTML 5 画布(canvas)

    canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...

  2. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  5. Tkinter画布-Canvas

    Python - Tkinter画布-Canvas: Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧 Canvas是一个长方形的面积,图画或其他复杂的 ...

  6. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  7. [转]Business Model Canvas（商业模式画布）：创业公司做头脑风暴和可行性测试的一大利器

    本文转自:http://www.36kr.com/p/214438.html 本文来自First Round Review,他们准备的文章既讲故事,还同时向创业者提供可操作的建议,以助力打造优秀的公司 ...

  8. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  9. 学习前端第二天心得体会（初步了解HTML5的部分API以及画布Canvas）

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

随机推荐

  1. MinerBean.java 数据库表 miner bean

    MinerBean.java 数据库表 miner bean package com.iteye.injavawetrust.miner; import java.util.Date; /** * 数 ...

  2. 【Unity Shaders】Diffuse Shading——在Surface Shader中使用properties

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  3. Ubuntu 14 安装MySQL指南

    ubuntu 14 安装MySQL指南安装MySQLsudo apt-get install mysql-server这个应该很简单了,而且我觉得大家在安装方面也没什么太大问题,所以也就不多说了,下面 ...

  4. Cocos2D中相关问题提问的几个论坛

    如果和SpriteBuilder相关可以到: http://forum.spritebuilder.com 提问. 如果是Cocos2D的问题,则可以到以下论坛询问: http://forum.coc ...

  5. Android NDK开发method GetStringUTFChars’could not be resolved

    Android NDK开发method GetStringUTFChars'could not be resolved 图1 最近用到android的ndk,但在eclipse中提示method Ge ...

  6. 框架页面高度自动刷新Javascript脚本

    实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如 ...

  7. Netflix Recommendations

    by Xavier Amatriain and Justin Basilico (Personalization Science and Engineering) In part one of thi ...

  8. 根据分析查看相关知识点分析iOS 三种录制视频方式

    这篇文章讨论了关于如何配置视频捕获管线 (pipeline) 和最大限度地利用硬件性能的一些不同选择. 这里有个使用了不同管线的样例 app,可以在 GitHub 查看. 第一种:UIImagePic ...

  9. 增量会话对象——DeltaSession

    在集群环境中为了使集群中各个节点的会话状态都同步,同步操作是集群重点解决的问题,一般来说有两种同步策略,其一是每次同步都把整个会话对象传给集群中其他节点,其他节点更新整个会话对象:其二是对会话中增量修 ...

  10. struts form表单提交action处理之后没有跳转页面

    作为一个ssm新人,对struts的理解也仅仅是书本上一些简单的示例, 对如下这个form进行提交之后,执行完action,并return 一个字符串,在struts配置文件中配置了对应的jsp页面, ...