我们知道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. 基于Android的手机程序----口袋理财(13年版)

    主页面 记账模块 司机模块 司机明细 司机记录 贷款计算 其他功能 收支一览 统计报表 购物计划 设置模块 使用说明 收支项目 项目添加

  2. Css详解之（选择器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Python学习笔记 - map reduce

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- def f(x): return x * x r = map(f, [1, 2, 3, 4, 5, 6, ...

  4. Mahout 系列之--canopy 算法

    Canopy 算法,流程简单,容易实现,一下是算法 (1)设样本集合为S,确定两个阈值t1和t2,且t1>t2. (2)任取一个样本点p属于S,作为一个Canopy,记为C,从S中移除p. (3 ...

  5. IntelliJ Idea + Maven + Junit

    Caculate.java package com.yxj.TestJunit; /** * Created by ubd on 15-4-17. */ public class Caculate { ...

  6. JavaScript进阶(六)用JavaScript读取和保存文件

    用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...

  7. 【一天一道LeetCode】#38. Count and Say

    一天一道LeetCode系列 (一)题目 The count-and-say sequence is the sequence of integers beginning as follows: 1, ...

  8. Struts2中的缓存----以Injector为例

    题外话,文章中有大量的标识1 标识2,大家可以用ctrl+f来查找. 构成缓存的类 主要就是以下两个: com.opensymphony.xwork2.inject.util.ReferenceCac ...

  9. EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时，再次点击pagenation时让表格数据显示的问题

    // 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. va ...

  10. 一键安装 redmine on rhel6.4

    一键安装 redmine on rhel6.4 一键式安装redmine省去了大量不必要的时间.下载:bitnami-redmine-2.5.2-1-linux-x64-installer.run. ...