html5新增元素 canvas

一、使用canvas元素

html5新增了一个<canvas…/>元素,该元素专门用于绘制图形。但实际上,<canvas…/>元素自身并不绘制图形,它只是相当于一张空画布。如果我们需要向<canvas…/>绘制图形,则必须使用JavaScript脚本进行绘制。<canvas…/>元素除了可以指定id,style,class,hidden等通用属性外,还可以指定height,width两个属性设置画布组件的高度和宽度。具体步骤如下:

  1. 获取canvas元素对应的DOM对象。
  2. 调用getContext(),获取CanvasRenderingContext2D对象。
  3. 调用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>

《html5新增元素 canvas》
二、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上绘制出各种各样的图形了。

点赞