2. canvas绘制渐变效果、绘制图像

一.绘制渐变效果

1. 线性渐变

语法：

		//创建CanvasGradient对象
		var g = context.createLinearGradient(x1,y1,x2,y2);
		//追加渐变颜色
		g.addColorStop(颜色开始的相对位置，颜色);

绘制线性渐变的实例：

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		var g = ctx.createLinearGradient(0,0,300,0);
		g.addColorStop(0, "rgb(255,0,0)");
		g.addColorStop(0.5, "rgb(0,255,0)");
		g.addColorStop(1, "rgb(0,0,255)");

		ctx.fillStyle = g;
		ctx.fillRect(20,20,260,260);
	</script>

效果图：

 

---

2.圆形渐变

语法:

		//创建CanvasGradient对象
		var g = context.createRadialGradient(x1,y1,r1,x2,y2,r2);
		//追加渐变颜色
		g.addColorStop(颜色开始的相对位置，颜色);

例子：

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		var g = ctx.createRadialGradient(150,150,50,150,150,100);
		g.addColorStop(0, "rgb(255,0,0)");
		g.addColorStop(0.5, "rgb(0,255,0)");
		g.addColorStop(1, "rgb(0,0,255)");

		ctx.fillStyle = g;
		ctx.fillRect(20,20,260,260);
	</script>

效果图：

 

---

3.Context的属性

Context中定义的主要属性

属性	说明
fillStyle	填充颜色
font	字体颜色
globalAlpha	透明度（0：透明，1：不透明）
globalCompositeOperation	重叠方法的指定
lineCap	线的终端类型（butt、round、square）
lineJoin	线的连接类型（rount、bevel、miter）
lineWidth	线的粗细
miterLimit	lineJoin为miter时，2直线结合部分的处理方式
shadowBlur	阴影适用的模糊水平
shadowColor	阴影的颜色
shadowOffsetX	阴影x方向的距离
shadowOffsetY	阴影y方向的距离
strokeStyle	线的颜色
textAlign	文本的配置方法(start、end、left、right、center)
textBaseline	文本基准线的设置

 

---

二.绘制图像

 

1.图像绘制的基本步骤如下：

1. 读取图像文件
2. 在canvas中进行绘制

		var image = new Image();
		image.src = "图像文件路径";	
		image.onload = function(){/* 图像读取时的处理 */};

有三种drawImage()方法用于图像的绘制：

1. 直接绘制

context.drawImage(image,dx,dy);

     2.尺寸修改（resize）

context.drawImage(image,dx,dy,dw,dh);

    3.图像截取

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

---

2.像素处理的API：

像素处理方法

方法	说明
imagedata = ctx.getImageData(sx,sy,sw,sh)	返回以（sx,sy）为左上顶点，宽为sw，高为sh的矩形图像-imagedata对象
ctx.putImageData(imagedata,dx,dy)	将imagedata所表示的图像绘制在顶点坐标为（dx,dy）处

简单的说，使用getImageData()方法取出Canvas上图像的像素数据，通过javascript加工过这些像素数据后，使用putImageData方法，重新绘制到Canvas中。

ImageData对象的属性

属性	说明
imagedata.width	图像数据的宽度
imagedata.height	图像数据的高度
imagedata.data	图像数据（CanvasPixelArray类型）