HTML5绘制图形

canvas概述

1. 添加canvas元素
   < canvas>标记是一个矩形区域，包含两个属性width和height。
   在网页中常用的形式如下：

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
..........
</canvas>

注意：画布canvas本身不具有画图功能，只是一个容器。
使用canvas和JavaScript绘制图形，步骤如下：
第一步：JavaScript使用id来寻找canvas元素，即获取当前画布对象。

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

第二步：创建context文件

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

第三步：绘制图形。
2. 绘制矩形
绘制函数如下表：

绘制基本形状

1. 绘制圆形。绘制函数如下表：
   
2. 使用moveTo与lineTo绘制直线
   绘制直线的函数通常是moveTo和lineTo，其含义如下表：
   

绘制渐变图形

渐变是两种或者更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于扫边样式和填充样式中。两种类型的渐变：线性渐变和放射性渐变（径向渐变）。

1. 绘制线性渐变：步骤：
   第一步：创建渐变对象。

var gradient = cxt.createLinearGradient(0,0,0,canvas.height);

第二步：为渐变对象设置颜色，指明过渡过程。

gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');

第三步：在context上为填充样式或描边样式设置渐变。

cxt.fillStyle=gradient;

绘制函数如下表：

2. 绘制径向渐变
所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终点是一样的。如果要实现放射性渐变，即径向渐变，需要使用函数createRadialGradient。

绘制变形图形

1. 变换原点坐标
   平移（translate）即将绘图区相当于当前画布的左上角进行平移。如果不进行平移，则绘图区原点和画布原点是重叠的，绘图区相当于画图软件里的热区或当前区；如果进行变形，则坐标位置会移动到一个新的位置。
   使用函数是translate（x，y）。假设原来在（100,100），然后translate（1,1），新的坐标原点在（101,101）。
2. 图形的缩放。
   需要使用scale（x，y）函数，该函数带有两个参数，分别代表在x，y两个方向上的值，每个参数对应的值就是放大或者缩小的倍数。
3. 旋转图形
   使用函数context.rotate（angle）来旋转图形。参数是以弧度为单位。rorate（）函数默认的从左上端的（0,0）开始旋转，通过制定一个角度，改变画布坐标和web浏览器中的< canvas>元素像素之间的映射，使得任意后续绘图在画布中都显示为旋转，他并没有旋转< canvas> 元素本身。注意，这个角度使用弧度指定的。

图形组合

利用globalComposieOperation属性来改变这些做法，不仅可以在已有的图形后面再画新的图形，还可以用来遮盖，清除某些区域。语法格式如下：

globalCompositeOpration = type;

属性type的含义如下表：

绘制带阴影的图形

在画布canvas上绘制带有阴影效果的图形非常简单，只需要设置几个属性即可。这几个属性分别shadowOffsetX，shadowOffsetY（这两个表示阴影x，y偏移量，单位像素），shadowBlur（阴影模糊程度）和shadowColor（阴影颜色）。