[置顶] HTML5研究之canvas

 

Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

例一：

<canvas id="canvas1" width="250" height="300" style="background-color:black">   

 你的浏览器不支持 Canvas 标签，请使用 Chrome浏览器或者 FireFox 浏览器   

</canvas><br/> 

canvas有两个属性width和heigt,另外也可以使用css样式进行设置。canvas的大多数操作是通过渲染上下文对象canvas.getContext();进行操作的。

因此我们首先需要获取上下文对象

var ctx = document.getElementById("canvas1").getContext("2d");

如果浏览器不支持画布，比如IE9以下的浏览器，ctx就会为空，我们可以用if(ctx)来判断是不是支持canvax

 下面就讲讲上下文对象ctx的一些应用

(1)绘制图形

矩形rectangles

ctx.fillRect(x,y,width,height):绘制实心矩形

ctx.strokeRect(x,y,width,height):绘制矩形边框

ctx.clearRect(x,y,width,height):清除一个矩形

路径paths

路径的绘制分为四个步骤

第一步是用 beginPath 创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。

第二步就是实际绘制路径的部分，html5提供一些方法供我们使用

moveTo(x, y)把它想象成是把笔提起，并从一个点移动到另一个点的过程。

lineTo(x, y)接受终点的坐标（x，y）作为参数。起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过 moveTo 方法来设置。

arc(x, y, radius, startAngle, endAngle, anticlockwise)弧线方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。

quadraticCurveTo(cp1x, cp1y, x, y)

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

贝塞尔曲线，它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。形状如下

rect(x, y, width, height)绘制矩形路径

第三步是调用 closePath 方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。

最后一步是调用 stroke 或 fill 方法，这时，图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框，fill 会用填充出一个实心图形。

注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。