一、使用canvas元素
html5新增了一个<canvas…/>元素，该元素专门用于绘制图形。但实际上，<canvas…/>元素自身并不绘制图形，它只是相当于一张空画布。如果我们需要向<canvas…/>绘制图形，则必须使用JavaScript脚本进行绘制。<canvas…/>元素除了可以指定id,style,class,hidden等通用属性外，还可以指定height，width两个属性设置画布组件的高度和宽度。具体步骤如下：
- 获取canvas元素对应的DOM对象。
- 调用getContext()，获取CanvasRenderingContext2D对象。
- 调用CanvasRenderingContext2D对象的方法进行绘图。
<body>
<canvas id=”cs” width=”400″ height=”400″
style=”border:1px solid black”></canvas>
<script type=”text/javascript”>
// 获取canvas元素对应的DOM对象
var canvas = document.getElementById(‘cs’);
// 获取在canvas上绘图的CanvasRenderingContext2D对象
var ctx = canvas.getContext(‘2d’);
// 设置填充颜色
ctx.fillStyle = ‘ #f00 ‘;
// 绘制矩形
ctx.fillRect(90 , 50 , 150 , 100);
ctx.fillStyle = ‘ #fff ‘;
ctx.font = ‘ bold 35px 宋体 ‘;
//填充字符串
ctx.fillText(‘Canvas’, 110, 100);
</script>
</body>
二、CanvasRenderingContext2D提供的方法和属性
CanvasRenderingContext2D对象方法
| 方法 | 说明 |
|---|---|
| voidarc( float x, float y, float radius, float startAngle, float endAngle, [boolean anticlockwise]); | 向Canvas的当前路径添加一段弧 |
| void arcTo(float x1, float y1, float x2, float y2, float radius); | 向Canvas的当前路径添加一段弧 |
| void beginPath(); | 开始定义路径 |
| void bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y); | 向Canvas的当前路径上添加一段贝济埃曲线 |
| void clearRect(float x, float y, float width, float height); | 擦出指定矩形区域上绘制的图形 |
| void clip(); | 从画布上剪裁一块出来 |
| void closePath(); | 关闭前面定义的路径 |
| CanvasGradient createLinearGradient(float x0, float y0, float x1, float y1); | 创建一个线性渐变 |
| CanvasPattern createPattern(Image image, String style); | 创建一个图形平铺 |
| CanvasGradient createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1); | 创建一个圆形渐变 |
| void drawImage(Image image, float x, float y, [float width], [float height], [float dx], [float dy], [float dw], [float dh]); | 绘制位图 |
| void fill(); | 填充Canvas的当前路径 |
| void fillRect(float x, float y, float width, float height); | 填充一个矩形区域 |
| void fillText(String text, float x, float y, [float maxWidth]); | 填充字符串 |
| void lineTo(float x, float y); | 把canvas的当前路径从当前结束点连接到x,y的对应点 |
| void moveTo(float x, float y); | 把canvas的当前路径的结束点移动到x,y的对应点 |
| void quadraticCurveTo(float cpx, float cpy, float x, float y); | 向canvas的当前路径上添加一段二次曲线 |
| void rect(float x, float y, float width, float height); | 向canvas的当前路径上添加一个矩形 |
| void restore(); | 恢复之前保存的绘图状态 |
| void rotate(float angle); | 旋转坐标系统 |
| void save(); | 保存当前的绘图状态 |
| void scale(float x, float y); | 缩放坐标系统 |
| void stroke(); | 沿着canvas的当前路径绘制边框 |
| void strokeRect(float x, float y, float w, float h); | 绘制一个矩形边框 |
| void strokeText(String text, float x, float y, [float maxWidth]); | 绘制字符串边框 |
| void translate(float x, float y); | 平移坐标系统 |
CanvasRenderingContext2D对象属性
| 属性 | 说明 |
|---|---|
| fillStyle | 设置填充路径时所用的填充风格。该属性支持3种类型的值： 1、符合颜色格式的字符串值，表明使用纯色填充。 2、CanvasGradient，表明使用渐变填充。 3、CanvasPattern，表明使用位图填充。 |
| strokeStyle | 设置绘制路径时所用的填充风格。该属性支持3种类型的值： 1、符合颜色格式的字符串值，表明使用纯色填充。 2、CanvasGradient，表明使用渐变填充。 3、CanvasPattern，表明使用位图填充。 |
| font | 设置绘制字符串时所用的字体 |
| globalAlpha | 设置全局透明度 |
| globalCompositeOperation | 设置全局的叠加效果 |
| lineCap | 设置线段端点的绘制形状。该属性支持3个值： 1、“butt”，不绘制端点，默认值。 2、“round”，绘制圆形端点。 3、“square”，绘制方形端点。 |
| lineJoin | 设置线条连接点的风格。该属性支持3个值： 1、“meter”，锐角形，默认值。 2、“round”，圆形。 3、“bevel”，斜角形。 |
| miterLimit | 当把lineJoin属性设为meter风格时，该属性控制锐角箭头的长度 |
| lineWidth | 设置笔触线条的宽度 |
| shadowBlur | 设置阴影的模糊度 |
| shadowColor | 设置阴影的颜色 |
| shadowOffseetX | 设置阴影在X方向的偏移 |
| shadowOffseetY | 设置阴影在Y方向的偏移 |
| textAlign | 设置绘制字符串的水平对齐方式，该属性支持start、end、left、right、center等属性值 |
| textBaseAlign | 设置绘制字符串的垂直对齐方式，该属性支持top、hanging、middle、alphabetic、idecgraphic、bottom等属性值 |
只要掌握了上述CanvasRenderingContext2D提供方法、属性的功能和用法，就可以在canvas上绘制出各种各样的图形了。