一、使用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上绘制出各种各样的图形了。