第10章-Canvas画布

一、绘制基本图形：

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进，以支持这一点，如video、audio和canvas标签。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式。Safari4+、Chrome、FireFox、Opera以及IE9+都已支持HTML5。

1.认识Canvas

HTML5的canvas元素是为了客户端矢量图形而设计的。需要注意的是，canvas只是图形容器，绘制图形需要使用JavaScript渲染。在JavaScript中通过调用绘图API在canvas上绘图。

canvas是一个矩形区域，我们可以使用相关绘图API控制其每一个像素，从而完成在canvas上绘制路径、矩形、圆形、字符以及图像的操作。

2.Canvas的常用属性和方法

若要在HTML页面中使用canvas元素，需要先创建canvas元素。

向HTML页面添加canvas元素：

<canvas id="myCanvas" width="400" height="300"></canvas>

canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成。创建一个JavaScript初始化函数，使这个函数在页面加载的时候就执行，同时在函数里调用相应的API画图就可以了。

Canvas对象的常用属性和方法如下：

属性名/方法名	描述
width/height	表示画布的宽/高度。和一幅图像一样，这个属性可以指定一个整数像素值或者是窗口宽/高度的百分比，当这个值改变的时候，在该画布上已经完成的任何绘图都会被擦除，默认值是300
getContext(contextID)	返回一个用于在画布上绘图的环境，返回的是CanvasRenderingContext2D对象，该对象实现了一个画布使用的大多数方法。参数contextID指定了想要在画布上绘制的类型。目前唯一的合法值是"2d"，它指定了当前的绘图类型是二维绘图

3.使用Canvas绘图对象绘制基本图形

通常，我们都是通过JavaScript在canvas上绘制图形的。一般需要以下几个步骤：

1)添加初始化JavaScript函数

<script>
    window.onload=function() {
        //在此添加绘图代码
    }
</script>

2)使用id寻找canvas元素

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

3)创建context对象

var context=canvas.getContext("2d");

getContext("2d")获得的2d上下文绘图环境对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4)坐标

这里要明确一下在绘制图形的过程中坐标的概念，如下图：

➀绘制矩形

例如，绘制一个红色的矩形，矩形的左上角在画布中的坐标为(0,0)，矩形宽80像素，高100像素：

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');//获取画布对象
    var ctx=canvas.getContext('2d');//获取Context对象
    ctx.fillStyle='#FF0000';//设置填充颜色为红色
    ctx.fillRect(0,0,80,100);//(x起点坐标,y起点坐标,宽度,高度)
</script>

➁绘制直线

例如，绘制一条折线：

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(10,10);
    ctx.lineTo(150,150);
    ctx.lineTo(10,50);
    ctx.stroke();//描边
</script>

➂绘制圆形

使用arc()方法绘制圆形，其参数构成如下：

context.arc(x,y,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的x坐标
y	圆的中心的y坐标
r	圆的半径
sAngle	起始角，以弧度计
eAngle	结束角，以弧度计
counterclockwise	可选。规定应该是逆时针绘图，还是顺时针绘图。false=顺时针，true=逆时针

例如，绘制圆形：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";//设置填充颜色为红色
    ctx.beginPath();//开始新路径
    ctx.arc(70,118,15,0,Math.PI*2,true);//绘制圆形路径
    ctx.closePath();//关闭路径
    ctx.fill();//填充颜色
</script>

➃路径

Canvas里有路径的概念。路径可以理解成通过画笔画出的任意线条，这些线条甚至不用相连。在没描边(stroke)或是填充(fill)之前，路径在canvas上是看不到的。

CanvasRenderingContext2D提供了一系列方法绘制路径。

arc()、rect()、lineTo()等方法能建立连续的路径，不能自动闭合，fillRect()方法可以建立闭合路径。

利用beginPath()、closePath()可以建立新的路径。

例如，在画布上绘制两条交叉路径，分别为红色和蓝色：(提示：使用stroke()方法在画布上绘制确切的路径）

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="red";//红色路径
    ctx.moveTo(0,215);
    ctx.lineTo(250,275);
    ctx.stroke();//进行绘制
    ctx.beginPath();
    ctx.strokeStyle="blue";//蓝色路径
    ctx.moveTo(0,300);
    ctx.lineTo(250,230);
    ctx.stroke();//进行绘制
</script>

➄绘制渐变背景

线形渐变指的是一条直线上发生的渐变，可以用填充的方式绘制渐变背景色：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,175,50);
</script>

1)createLinearGradient用于创建一个线形渐变对象，(0,0)表示渐变的起点，(175,50)表示渐变的终点。

2)addColorStop在某处添加渐变颜色值。

3)fillStyle把渐变对象作为填充样式。

4)调用fill及其他相关图形进行渐变填充。

➅绘制图像

例如，将图片flower.png绘制在画布上：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=new Image();
    img.src="flower.png";
    ctx.drawImage(img,0,0);
</script>

以上代码，直接调用canvas的drawImae()方法首次加载图片不显示，解决方案是在Img.onload()方法中绘制图。但是，如果以后需要不断地绘制该图片的时候，就会一直调用onLoad事件，出现图片一闪一闪的现象，解决方案是根据Img.complete()方法判断图片是否加载完成。改写后的代码如下：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=new Image();
    img.src="flower.png";
    if(img.complete){//如果图片已经存在于浏览器缓存，则直接调用回调函数
        ctx.drawImage(img,0,0);
        return;//直接返回，不用再处理onLoad事件
    }
    img.onload=function(){
        ctx.drawImage(img,0,0);
    }
</script>

drawImage()方法可以在画布上绘制图像、画布或视频。drawImage()方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

drawImage()方法有3种原型，如下所示：

1)在画布上定位图像：context.drawImage(img,x,y);

2)在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

3)剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 

➆绘制文字

例如，使用fillText()在画布上写文本“中文测试”：

<canvas id="myCanvas"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Courier New";//设置字体样式
    ctx.fillStyle="blue";//设置字体填充颜色
    ctx.fillText("中文测试",50,50);//从坐标点(50,50)开始绘制文字
</script>

二、绘制图像：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 方法各参数含义：

参数	描述
img	规定要使用的图像、画布或视频
sx	可选。开始剪切的x坐标位置
sy	可选。开始剪切的y坐标位置
swidth	可选。被剪切图像的宽度
sheight	可选。被剪切图像的高度
x	在画布上放置图像的x坐标位置
y	在画布上放置图像的y坐标位置
width	可选。要绘制的图像的宽度(伸展或缩小图像)
height	可选。要绘制的图像的高度(伸展或缩小图像)

 

图像像素的操作还有转换的操作如下：

项目实战：跳动的心

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8"> 
  	<script>
	var c,ctx,image=new Image();
	//初始化
	window.onload=function(){	
		c=document.getElementById("myCanvas");
		ctx=c.getContext('2d');
		image.src="./heart.png";
		big();
	}
	function  big(){
		ctx.clearRect(90,90,150,150);//擦除小图
		ctx.drawImage(image,50,50,250,250);	
		setTimeout("small()",500);//在500ms后调用small()方法
	}
	function small(){
		ctx.clearRect(50,50,250,250);//擦除大图
		ctx.drawImage(image,90,90,150,150);    
		setTimeout("big()",500);
	}
  	</script>
 </head>
 <body>
  <canvas id="myCanvas" width="800px"  height="700px" style="border:1px solid black">浏览器不支持</canvas>
 </body>
</html>