我们知道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. 在mysql数据库中创建oracle scott用户的四个表及插入初始化数据

    在mysql数据库中创建oracle scott用户的四个表及插入初始化数据 /* 功能:创建 scott 数据库中的 dept 表 */ create table dept( deptno int ...

  2. 发布Ext JS 5.1 beta版本

    原文:Announcing Ext JS 5.1 Beta 概述 我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...

  3. 1、libgdx简介

    Libgdx 是一个跨平台和可视化的的开发框架.它当前支持Windows,Linux,Mac OS X,Android,IOS和HTML5作为目标平台. Libgdx允许你一次编写代码不经修改部署到多 ...

  4. （二十四）监听键盘的通知和键盘弹出隐藏的View移动

    让控制器监听键盘的通知,注意谁监听,谁的dealloc方法中就要remove,如果非ARC还要调用父类的dealloc方法. //监听键盘的操作: [[NSNotificationCenter def ...

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

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

  6. Android Studio中创建Kotlin For Android项目

    Kotlin俗称Android中的Swift,它是Jetbrains公司开发的基于JVM的一门语言,JetBrains公司可能大家并不熟悉,不过相信IntelliJ IDE大家一定知道,Android ...

  7. 【面试笔试算法】Problem 1 : DP滑雪问题--网易互联网算法实习生2017笔试题

    Description Michael喜欢滑雪百这并不奇怪,因为滑雪的确很刺激.可是 为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  8. 中国象棋游戏Chess（1） - 棋盘绘制以及棋子的绘制

    本项目都使用QT来实现绘图,没有任何第三方的资源. 工程详情:Github 首先将棋盘设计为一个类Board // Board.h // Board类实现了棋盘的绘制以及显示 // #ifndef B ...

  9. PS图层混合算法之一（不透明度，正片叠底，颜色加深，颜色减淡）

    下列公式中,A代表了上面图层像素的色彩值(A=像素值/255),B代表下面图层像素的色彩值(B=像素值/255),C代表了混合像素的色彩值(真实的结果像素值应该为255*C).该公式也应用于层蒙板. ...

  10. android bitmap的内存分配和优化

    首先Bitmap在Android虚拟机中的内存分配,在Google的网站上给出了下面的一段话 大致的意思也就是说,在Android3.0之前,Bitmap的内存分配分为两部分,一部分是分配在Dalvi ...