firefox html5 canvas,HTML5 canvas 入门

是HTML5新增的元素，可以用于绘制图形，制作照片，创建动画。 标签只是图形容器，它没有自己的行为，必须使用脚本来绘制图形。

创建一个canvas

标签只有两个属性—— width和height，当没有设置宽度和高度的时候， 的默认大小为300px×150px。需要注意的是，如果使用css来定义的大小，在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

渲染上下文

元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas起初是空白的，首先需要找到渲染上下文，然后在它的上面绘制。var canvas=document.getElementById("mycanvas");

var ctx = canvas.getContext('2d');

有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，就是上下文的格式。

检查浏览器兼容性

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代码用于检测浏览器的是否支持canvasvar canvas = document.getElementById('mycanvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// drawing code here

} else {

// canvas-unsupported code here

}

canvas 坐标

在绘制图形之前，我们还应该先了解一下canvas中的坐标。canvas默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点定位。

绘制 canvas 图形

好的，接下来我们就开始了解怎么使用Canvas的API绘制基本图形了 。var canvas = document.getElementById('mycanvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.fillStyle="red";

ctx.fillRect(0,0,100,100);

}

上面的两行代码绘制一个红色的矩形：

设置fillStyle属性可以是css颜色，渐变，或图案。fillStyle默认设置是#000000(黑色)。

fillRect(x,y,width,height)方法定义了矩形当前的填充方式，x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸。

canvas 路径

路径是通过线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

以下是所要用到的方法：函数描述strokeStyle用于设置画笔绘制路径的颜色、渐变和模式

lineWidth定义绘制线条的宽度

beginPath()开始一个新的绘制路径

moveTo(x,y)移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点

lineTo(x,y)使用直线边接当前端点和指定的坐标点(x,y)

stroke()沿着绘制路径的坐标点顺序绘制直线

closePath()如果当前的绘制路径是打开的，则关闭掉该绘制路径

这里需要注意的是，当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

下面的代码绘制了一个三角形：function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(75,50);

ctx.lineTo(100,75);

ctx.lineTo(100,25);

ctx.fill();

}

}

canvas 圆弧

绘制路径我们可以使用arc()方法。该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。var canvas=document.getElementById("mycanvas");

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

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

canvas 文本

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

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

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

文本被填充方式：var canvas=document.getElementById("mycanvas");

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

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

文本边框备绘制方式：var canvas=document.getElementById("mycanvas");

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

ctx.font="30px Arial";

ctx.strkeText("Hello World",10,50);

canvas 图像

引入图像到canvas里需要以下两步基本操作：获取一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片。

使用drawImage()函数将图片绘制到画布上。

获取图片和绘制图片，下面只展示最简单的一种：var canvas=document.getElementById("mycanvas");

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

var img=document.getElementById("img");

ctx.drawImage(img,10,10);

drawImage有三个参数：drawImage(image, x, y)。其中image是image或者 canvas对象，x和y是其在目标canvas里的起始坐标。