HTML5

HTML5 Canvas

1. 什么是 canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2. 创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

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

3.通过 JavaScript 来绘制

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

<script type="text/javascript">
var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.arc(150,80,35,0,2*Math.PI);
        ctx.moveTo(140,70);
        ctx.arc(140,70,4,0,2*Math.PI);
        ctx.moveTo(160,70);
        ctx.arc(160,70,4,0,2*Math.PI);
        ctx.moveTo(160,90);
        ctx.lineTo(140,90);
        ctx.moveTo(160,90);
        ctx.arc(150,90,10,0,1*Math.PI);
		ctx.stroke()
</script>

• JavaScript 使用 id 来寻找 canvas 元素:

`var c=document.getElementById("myCanvas");`

• 然后创建 context 对象：

var cxt=c.getContext("2d"); 

• getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4.坐标

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

5.通过指定从何处开始，在何处结束，来绘制一条线：

代码如下：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

6.Canvas - 路径
在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）