HTML5画布

Canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
标签只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 元素来绘制.

注意: 默认情况下 元素没有边框和内容。

canvas简单实例如下:

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

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
可以在HTML页面中使用多个 元素.
使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

使用JavaScript来绘制图像

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

实例解析:
首先，找到 元素
var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：
var ctx=c.getContext(“2d”);
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

注：

getContext(“2d”) 对象是内建的 HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。getContext() 方法返回一个用于在画布上绘图的环境。

语法

Canvas.getContext(contextID)

参数

参数 contextID 指定了想要在画布上绘制的类型。当前唯一的合法值是"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。

坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 “ink” 的方法，就像stroke().

实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d");
ctx.moveTo(0,0); 
ctx.lineTo(200,100); 
ctx.stroke();
 

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

画布的左上角坐标为0,0

x：圆心在x轴上的坐标
y：圆心在y轴上的坐标
r：半径长度
start：起始角度，以弧度表示，圆心平行的右端为0度
stop：结束角度，以弧度表示

注意：Math.PI表示180°，画圆的方向是顺时针
实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().

实例
使用 arc() 方法 绘制一个圆:

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(95,50,40,0,2*Math.PI); 
ctx.stroke();

文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():
实例
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.font="30px Arial"; 
ctx.fillText("Hello World",10,50);

使用 strokeText():
实例

使用 “Arial” 字体在画布上绘制一个高 30px 的文字（空心）：

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.font="30px Arial"; 
ctx.strokeText("Hello World",10,50);