html5 图形 标签,HTML5 Canvas标签总结一

一、什么是canvas

1.canvas简介

canvas：HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成， 标签只是图形容器，可以通过多种方法使用 canvas 绘制路径、盒、圆、字符以及添加图像。

2.浏览器支持

支持 <canvas>元素的第一个浏览器版本

二、canvas的基本用法

1.创建一个画布(Canvas)

规定元素的 id、宽度和高度(默认情况下 元素没有边框和内容。)：

2.向元素上绘图

在HTML网页上定义canvas元素后，它只是一张空白的画布，为了向canvas上绘图，必须经过三步：

获取canvas元素对应的DOM对象，这是一个Canvas对象。调用Canvas对象的getContext()方法，返回一个CanvasRenderingContext2D对象。调用CanvasRenderingContext2D对象的方法绘图。3.绘图代码模板示例

代码

运行结果

三、绘图

3.1 绘制矩形

只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)，当canvas根据path绘制时，可以绘制出任意形状。

canvast 提供了两种方法绘制矩形：

1、fillRect(x, y, width, height)：绘制一个填充的矩形。2、strokeRect(x, y, width, height)：绘制一个矩形的边框。

代码如下：

绘制矩形

运行结果

3.2 点线模式

绘制线段或边框时默认总是使用实线，如果希望使用点线进行绘制，可通过设置CanvasRenderingContext2D的setLineDash方法和lineDashOffset属性实现。例如：lineDashOffset=3，lineDash=【5,3,1,2】；代表长为5的实线、距离为3的间距、长为1的实线、距离为2的间距...这种点线模式。但开始绘制时只绘制长度为2的实线，因为lineDashOffset为3就是控制该点线‘移过’3个点。

代码

00:14

3.3 绘制字符串

canvas 提供了两种方法来绘制字符串:

1.fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

2.strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

代码

运行结果

3.4 设置阴影

canvas为设置图形阴影提供了如下属性：

shadowBlur：设置阴影的模糊度shadowOffsetX：阴影在X方向的偏移shadowOffsetY：阴影在Y方向的偏移

代码

运行

3.5 绘制路径

在canvas上使用路径，可按如下步骤进行：

1.调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径；

2.调用CanvasRenderingContext2D对象的各种方法添加子路径；

3.调用CanvasRenderingContext2D对象的closePath()方法关闭路径

4.调用CanvasRenderingContext2D对象的fill()或stroke()方法来填充路径或绘制路径边框。

代码

运行

3.6 绘制曲线

绘制二次贝塞尔曲线:

quadraticCurveTo(cp1x, cp1y, x, y)

说明：参数 1 和 2：控制点坐标参数 3 和 4：结束点坐标

二次贝塞尔曲线

绘制三次贝塞尔曲线:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

说明：参数 1 和 2：控制点 1 的坐标参数 3 和 4：控制点 2 的坐标参数 5 和 6：结束点的坐标

三次贝塞尔曲线

曲线应用

运行结果

3.7 绘制位图

CanvasRenderingContext2D为绘制位图提供了3个方法：

1：drawImage(image, x, y)：绘制出图片原图来的大小，不对图片做缩放处理，绘制到(x，y)处；

2：drawImage(image, x, y, width, height)：这个方法多了 2 个参数：width 和height，这两个参数用来控制 当像 canvas 画入时应该缩放的大小。

3：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其他 8 个参数：前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

举报/反馈