canvas画布的简单应用

一、canvas画布基本应用的步骤：

1、创建一个画布的方法：指定id、width（画布宽度）、height（画布高度）。

<canvas id="canvas" width="500" height="350"></canvas>

2、引入绘画的脚本（JavaScript脚本文件）：

（1）获取canvas元素：用getElementById方法获取到canvas对象；

（2）获得上下文：在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象，要使用canvas对象的getContext()方法获得图形上下文，在draw函数中把参数设置为"2d"；

（3）填充与绘制边框：canvas的绘制有两种方法：

1）填充（fill）：填充是将图形内部填满；

2）绘制边框（stroke）：绘制边框是不把图形内部填满，只是绘制图形的外框；

（4）设置绘制样式：当我们在绘制图形的时候，首先要设定好绘制的样式，然后就可以调用有关的方法进行绘制：

1）fillStyle属性：填充的样式，在这个属性里面设置填入的填充颜色值；

2）strokeStyle属性：图形边框的样式，在这个属性里面设置填入边框的填充颜色；

（5）指定画笔宽度：通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的；

（6）设置颜色值：绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定；

（7）绘制相应图形；

3、绘制矩形：

（1）绘制矩形：使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框，context.fillRect(x,y,width,height)；context.strokeRect(x,y,width,height)，这两种方法的参数是一样的，x是指矩形的起点横坐标，y是指矩形起点的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。

（2）HTML代码：

<canvas id="canvas" width="500" height="350"></canvas>

（3）JavaScript代码：

//canvas绘制矩形
function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext("2d");
	
	context.fillStyle = "lightblue";
	context.strokeStyle = "red";
	context.lineWidth = 5;
	
	context.fillRect(0,0,400,300);
	context.strokeRect(50,50,180,120);
	context.strokeRect(110,110,180,120);
};

（4）效果图如下：

4、绘制圆形：

（1）绘制圆形步骤：

1）开始创建路径：使用图形上下文对象的beginPath方法，即context.beginPath();

2）创建图形路径：创建圆形路径时，需要使用图形上下文对象的arc方法：context.arc(x,y,radius,starAngle,endAngle,anticlockwise)，x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按照顺时针方向绘制。绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果喜欢使用角度，可以用var radius = degree * Math.PI / 180;的方法将角度换成弧度，其中的Math.PI表示的角度是180度，Math.PI*2的角度是360度；

3）创建完成关闭路径：使用图形上下文对象的closePath方法将路径关闭，context.closePath();

4）设置绘制样式然后调用绘制方法进行绘制;

（2）HTML代码：

<canvas id="canvas" width="500" height="350"></canvas>

（3）JavaScript代码：

function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext("2d");
	
	context.fillStyle = "#f1f2f3";
	context.fillRect(0,0,400,400);
	
	context.beginPath();
	context.arc(120,120,120,0,Math.PI * 2,true);
	context.closePath();
	context.fillStyle = "rgba(255,0,0,0.25)";
	context.fill();
};

（4）效果图如下：

（5）绘制多个圆形重叠的JavaScript代码如下：

function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext("2d");
	
	context.fillStyle = "#f1f2f3";
	context.fillRect(0,0,400,400);
	
	context.beginPath();
	context.arc(120,120,120,0,Math.PI * 2,true);
	context.closePath();
	context.fillStyle = "rgba(255,0,0,0.25)";
	context.fill();

	for(var i = 0; i < 10; i++){
		context.beginPath();
		context.arc(i*20,i*20,i*10,0,Math.PI * 2,true);
		context.closePath();
		context.fillStyle = "rgba(255,0,0,0.25)";
		context.fill();
		context.strokeStyle = "red";
		context.stroke();
	}
};

（6）绘制多个圆形重叠的效果图如下：

5、绘制文字：

（1）绘制文字可以使用fillText方法或者strokeText方法；fillText方法用填充的方式来绘制字符串：context.fillText(text,x,y,[maxwidth])；strokeText方法用轮廓的方式来绘制字符串：context.strokeText(text,x,y,[maxwidth])；第一个参数text表示要绘制的文字，第二个参数x表示要绘制的文字的起点横坐标，第三个参数y表示要绘制的文字的起点纵坐标，第四个参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出(溢出的文字会通过压缩使得全部显示)。

（2）设置文字的字体：context.font = "font-weight font-size font-family"；context-font有三个参数，第一个参数font-weight的取值（normal：默认值，定义标准的字符；bold：定义粗体字符；bolder：定义更粗字符；lighter：定义更细的字符；100-900：定义由粗到细的字符，400等同于normal，而700等同于bold）第二个参数font-size规定文本的字体尺寸；第三个参数font-family规定文本的字体系列，其值可以是'ariSDal','arial','宋体','微软雅黑'等任何字体；

（3）设置文字的垂直对齐方式：context.textBaseline='alphabetic';属性值可以是top(顶部对齐)、hanging(悬挂)、middle(中间对齐)、bottom(底部对齐);

（4）设置文字水平对齐方式：context.textAlign = "start";属性值可以设置为：start、end、left、right、center；

（5）HTML代码：

<canvas id="canvas" width="500" height="350"></canvas>

（6）JavaScript代码：

//绘制文字
function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext("2d");
	
	context.fillStyle = "lightblue";
	context.fillRect(0,0,500,350);
	
	context.fillStyle = "#fff";
	context.strokeStyle = "red";
	context.font = "bold 40px 微软雅黑";
	context.textBaseline = "top";
	context.textAlign = "left";
	context.fillText("hello world!",0,0);
	context.strokeText("hello world!",0,40);
	
};

（7）效果图如下：

注意：使用draw函数进行绘画：在body属性中，使用οnlοad="draw('canvas');"语句，调用脚本文件中的draw函数进行图形绘制。

二、canvas的保存：

1、保存文件：很多时候绘制完成的图片需要保存，那么我们可以使用Canvas API完成；

2、Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载，然后将重新装载后的文件直接保存即可。Canvas API保存文件的原理实际上就是把绘画的状态输出到一个data URL地址所指向的数据中的过程；

3、data URL实际上就是base64位编码的URL，主要用于小型的，可以在网页中直接嵌入而不需要从外部嵌入数据，比如img元素里面的图像文件。data URL的格式为"data:image/jpeg;base64,/9j/4..."，toDataURL的使用方法：canvas.toDataURL(type);这个方法使用一个参数type，表述输出数据的MIME类型(jpg、image/jpeg)；

4、canvas存储的实现：

（1）HTML代码：

<canvas id="canvas" width="500" height="350"></canvas>

（2）JavaScript代码：

function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext("2d");
	
	context.fillStyle = "lightblue";
	context.fillRect(0,0,400,300);
	
	//获取当前链接
	window.location = canvas.toDataURL("image/jpeg");
};

（3）效果图如下：

三。利用canvas制作简单的动画（进度条）：

1、制作步骤：

（1）使用setInterval方法设置动画的间隔时间：setInterval(code,millisec)，setInterval方法是HTML中固有的方法，这个方法接收两个参数，第一个参数表示执行动画的函数，第二个参数为间隔时间，单位是毫秒；

（2）用来绘图的函数：

1）通过不断的变换x和y的坐标来实现动画效果；

2）在该函数中先用clearRect方法将画布整体或者局部擦除；擦除图像clearRect方法：context.fillRect(x,y,width,height)；x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度；

2、实现过程：

（1）HTML代码：

<canvas id="canvas" width="500" height="350"></canvas>

（2）JavaScript代码：

var i;
var width,height;
function draw(id){
	var canvas = document.getElementById(id);
	context = canvas.getContext("2d");
	width = canvas.width;
	height = canvas.height;
	
	setInterval(paint,100);
	i = 0;
};
function paint(){
	context.fillStyle = "green";
	context.fillRect(i,20,10,10);
	i++;//效果相当于进度条
};

（3）效果图如下：