html5--canvas上篇

一：什么是canvas

canvas是一对标签;canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也不是那么简单)的动画。canvas拥有和其他标签一样的通用属性，如id，width,height,background等等。

二：canvas的基本使用

1、获取context对象

通过脚本（通常为JavaScrip）在canvas中绘制图形主要是通过context对象，context对象的获取方法如下

//首先通过ID获取canvas
var canvas = document.getElementById("canvas");
//然后通过canvas获取context对象，注意获取方法中的参数为2d
var context = canvas.getContext("2d");

2、绘制基本图形

canvas中可以绘制矩形、路径（通过路径绘制其他图形）、文本、图片

（1）绘制矩形

fillRect(x,y,width,height)：绘制一个填充的矩形

strokRect(x,y,width,height)：绘制一个矩形的边框
clearRect(x,y,width,height)：清除指定矩形区域，让清除部分完全透明。

（参数说明：x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸）

例子：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

效果图：

（2）绘制路径

绘制路径的一些步骤：

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

绘制路径所用的函数的说明：

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

moveTo(x,y)：将笔触移动到指定的坐标x以及y上。(即起始点，从这个点（x，y）可以画)

lineTo(x,y)：绘制一条从当前位置到指定x以及y位置的直线。

arc(x,y,radius,startAngle,endAngle,anticlockwise)：画一个以 （x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1,y1,x2,y2,radius)：根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()：通过线条来绘制图形轮廓。

fill()：通过填充路径的内容区域生成实心的图形

例子：画笑脸

function smileFace(){
	canvas = document.getElementById("canvas");
	if(canv.getContext){
		var context = canv.getContext("2d");
		context.beginPath();
		context.arc(50,50,50,0,Math.PI*2,false);
		context.stroke();
		context.moveTo(25,30);
		context.arc(25,30,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(75,30);
		context.arc(75,30,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(50,60);
		context.arc(50,60,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(37,75);
		context.arcTo(60,78,63,75,15);
		context.stroke();
	}
}

效果图:

（3）绘制文本

canvas 提供了两种方法来渲染文本:


fillText(text,x,y[,maxWidth])：在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

fillText(text,x,y[,maxWidth])：在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

参数说明：text：需要绘制的文本  x,y：文本的位置

例子：

//文本
function tx(){
	if(canv.getContext){
		var context = canv.getContext("2d");
                //设置字体的样式
               content.font ="100px serif";
		context.strokeText("hello world!",50,50);
		context.fillText("hello world!",50,100)
	}
}

效果图：

（4）使用图片

引入图像到canvas里需要以下两步基本操作：

1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
2. 使用drawImage()函数将图片绘制到画布上

canvas的API可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement：这些图片是由 Image()函数构造出来的，或者任何的<img>元素 HTMLVideoElement：用一个HTML的  <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像 HTMLCanvasElement：可以使用另一个  <canvas> 元素作为你的图片源。 ImageBitmap：这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

例子：

//图片和阴影
function pic(){
	if(canv.getContext){
		var context = canv.getContext("2d");
		var img  = new Image();
		img.src = "img/0.jpg";
		img.onload = function(){
			var pattern = context.createPattern(img,"no-repeat");
			context.shadowOffsetX = 2;
			context.shadowOffsetY = 2;
			context.shadowBlur = 10;
			context.shadowColor = "rgba(0,0,0,0.7)";
			context.fillStyle = pattern;
			context.fillRect(0,0,300,300);
		}
	}
}

这一篇只是介绍canvas的简单使用，下一篇会介绍canvas的一些好玩的知识点