javascript笔记整理系列 - canvas

1 简介

浏览器绘图方式：
1. 使用样式来规定普通DOM对象的位置和颜色。
2. SVG（可缩放矢量图形）。
3. canvas（画布）

2 SVG

SVG可以看成一门专用于描述图形文档而非描述文字文档的HTML元素。
来看一个例子：

<svg xmlns="http://www.w3.org/2000/svg">
    <circle r="50" cx="50" cy="50" fill="red" />
    <rect x="120" y="5" width="90" height="90" stroke="blue" fill="none" />
</svg>

1. xmlns属性把一个元素切换到一个不同的XML命名空间，这个由url定义的命名空间规定了当前使用的语言。
2. HTML中不存在circle、rect标签，但在SVG中是有意义的。
3. 这些标签会创建对应的DOM元素，并通过属性设置样式。

3 canvas元素

　我们可以在<canvas>元素中绘制画布图形，通过设置width与height属性来确定画布尺寸（单位为像素）。
　新的画布是空白的，完全透明。
　canvas标签可以支持多种不同风格的绘图。要获取真正的绘图接口，首先要创建一个能够提供绘图接口的方法的上下文(context)。目前有两种得到广泛支持的绘图接口：用于绘制二维图形的”2d”，与通过openGL接口绘制三维图形的”WebGL”。

　我们可以在<canvas>元素上调用getContext方法创建context对象。

<canvas width="120" height="60"></canvas>
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10,10,100,50);
</script>

上面代码创建一个矩形，宽100高50，左上点坐标为(10,10)。

　画布使用的坐标系统将(0,0)放置在左上角，并且y轴向下增长。

3.1 填充与描边

fillRect方法可以填充一个矩形。
strokeRect方法可以画出一个矩形的外框。

<canvas width="120" height="60"></canvas>
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.strokeStyle="blue";
context.strokeRect(5,5,50,50);
context.lineWidth = 5;
context.strokeRect(135,5,50,50);
</script>

3.2 路径

路径是线段的序列。2Dcanvas接口使用一种奇特的方式来描述这样的路径。

<canvas width="120" height="60"></canvas>
<script>
var canvas = document.querySelector("canvas");
var cx= canvas.getContext("2d");

cx.beginPath();
for(var y = 10; y < 100; y+=10){
    cx.moveTo(10,y);    //移动起点
    cx.lineTo(90,y);    //由起点画至该点
}
cx.stroke();
</script>

　上面的例子创建了多个平行线段，然后用stroke()方法勾勒轮廓。每个线段都是由lineTo以当前位置为路径起点绘制的。除非调用了moveTo，否则这个位置通常是上一个线段的终点位置。