09 HTML5-Canvas画布

Canvas画布

一，Canvas标签

Canvas元素用于图形的绘制，是图形的容器，必须通过脚本来完成绘制。用于绘制路径，盒，圆，字符，以及添加图像。

二，创建Canvas元素

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

三，绘制图像

JavaScript绘制图像：

<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#FF0000";
	cxt.fillRect(0,0,150,75);
</script>

1 ，canvas元素本身是没有绘图能力,绘制工作必须在 JavaScript 内部完成
2， getContext(“2d”) 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3， fillStyle 方法将其染成红色，fillRect方法规定了形状、位置和尺寸。

四，使用路径

在每次绘制图形开始和完毕时都需要把使用的路径进行开启和关闭，避免一个绘制路径重复调用。

路径开启方法：

beginPath()

路径关闭方法：

closePath()

五，moveTo与lineTo方法

moveTo():

将光标移动到指定坐标点，绘制直线时，以该坐标点为起点。

lineTo():

与move to方法中指定的直线起点与参数中指定的终点之间绘制直线。

六，Canvas绘制贝塞尔曲线

贝塞尔曲线方法：

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

1，cp1x、cp1y指第一个控制点的X,Y
2，cp2x、cp2y指第二个控制点的X,Y
3，x、y指的是直线的X,Y

案例：

七，Canvas绘制线性渐变

线性渐变方法：

createLinearGradient(x0,y0,x1,y1);

1，x0，y0:渐变开始点的 X,Y坐标
2，x1，y1:渐变结束点的 X,Y坐标

案例：

八，Canvas绘制径向渐变

径向渐变方法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

1，x0,y0,r0:渐变的开始圆的 X,Y 坐标，开始圆的半径
2，x1,y1,r1:渐变的开始圆的 X,Y 坐标，开始圆的半径

案例：

九，图形组合

图形组合属性：

 globalCompositeOperation = "关键字";

关键字如下：

十，图像绘制

图形绘制方式：

方法一，在画布上定位图像：

context.drawImage(img,x,y);

方法二，在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

方法三，剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

关键字如下：

注：由于个人能力有限，该内容借鉴于W3C网站及API手册，供参考。