HTML5 绘制图形 Canvas 与 SVG 的基本用法

HTML5 绘制图形 Canvas 与 SVG 的基本用法（笔记）

Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，二者有各自的优势和特点，可适用于不同的场景。

---

Canvas 与 SVG简单比较

Canvas	SVG
提供API通过JavaScript 绘制	SVG使用 XML 格式定义基于矢量的图形
逐像素进行渲染	每个被绘制的图形均被视为对象
依赖分辨率	不依赖分辨率(图像在放大或改变尺寸的情况下其图形质量不会有损失)
渲染速度快 适合图像密集型的游戏	复杂度高会减慢渲染速度 不适合游戏应用

Canvas基本用法

首先，在HTML中添加 canvas 标签，即在html中创建了一个画布容器:

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

然后在JS脚本中获取canvas DOM对象，创建context对象即可开始使用其API方法在canvas创建的画布上进行绘制了：

<script>
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
</script>

canvas API简单介绍

• 坐标
  canvas坐标系统与大多数绘图API一样，画布左上角坐标为（0,0），x轴方向水平向右，y轴方向垂直向下，单位为像素：
  
• 绘制矩形
  首先介绍两种绘制方法：context.fill() 和 context.stroke(),其中fill()为填充方法，stroke()为绘制轮廓的方法，以绘制矩形为例：

context.fillStyle="#FF0000";    //设置填充样式
context.strokeStyle="rgb(0,165,255)";    //设置轮廓样式
context.lineWidth=4;     //设置绘制线宽
context.rect(0,0,150,75);     //创建矩形形状(x,y,width,height)
context.fill();    //填充矩形
context.stroke();    //绘制矩形轮廓

绘制结果如图：

需要在绘制图形前设置样式和颜色，颜色设置一般有以下几种方式：

1. ctx.fillStyle = “orange”;
2. ctx.fillStyle = “#FFA500”;
3. ctx.fillStyle = “rgb(255,165,0)”;
4. ctx.fillStyle = “rgba(255,165,0,1)”;
   其中，rgba第四个参数为透明度。

rect()方法只是创建了矩形形状，并没有将其绘制出来，API也提供了直接绘制出矩形的方法fillRect(x,y,width,height), strokeRect(…)，还有清除矩形的方法clearRect(…)。

• 绘制路径和形状
  先看示例代码：

    /*填充三角形*/
    context.beginPath();     //新建一条路径
    context.moveTo(25,25);   //将笔触移动到指定的坐标
    context.lineTo(105,25);     //创建到指定坐标的直线
    context.lineTo(25,105);
    context.fill();

    /*描边三角形*/
    context.beginPath();
    context.moveTo(125,125);
    context.lineTo(125,45);
    context.lineTo(45,125);
    context.closePath();     //闭合路径
    context.stroke();

绘制结果：

其中，moveTo(x,y)方法指将路径起始点放在哪，即画路径笔放在哪个地方，这时还并没有创建出线条，继续moveTo到下一个坐标并不会产生路径，只是改变了笔的位置；而lineTo(x,y)方法则创建出了路径（并没有绘制出来），且笔触的位置也跟着改变了；另外closePath()方法指让路径闭合，如图创建出了闭合的三角形。

注：beginPath()指开始创建路径，如果画下一条路径时没有重新调用beginPath(),绘制下一条路径时，上一条路径也会重新绘制一遍；fill()会自动闭合路径，与closePath()一样，而stroke()不会。

绘制一般的形状，基本都可以使用创建路径的方式，还有一些其他方法可以创建弧线、曲线等路径，从而可以绘制出更复杂的图形：

1. 弧形

arc(x, y, radius, startAngle, endAngle, anticlockwise)；

圆心：（x,y）， 半径：radius，起始弧度：startAngle ，结束弧度：endAngle，逆时针与否：anticlockwise（默认false为顺时针，true为逆时针）

示例：

context.fillStyle = "rgb(255,165,0)";
context.beginPath();
context.a