html5的canvas,html5的canvas的作用

怎样在html5中添加canvas标签

canvas 标签是 HTML 5 中的新标签。

成都服务器托管，成都创新互联提供包括服务器租用、BGP机房服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询：18982081108

定义和用法

canvas 标签定义图形，比如图表和其他图像。

canvas 标签只是图形容器，您必须使用脚本来绘制图形。

实例

通过 canvas 元素来显示一个红色的矩形：

!DOCTYPE HTML

html

head

script type="text/javascript"

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('24d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

/script

/head

body

canvas id="myCanvas"your browser does not support the canvas tag /canvas

/body

/html

html5 canvas是做什么的

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

html5 canvas绘图有什么用

W3school上面是这么介绍的：

HTML5 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

更多信息

HTML5 - Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

在使用 canvas 绘制图像时，canvas 画布左上角的坐标为(0, 0)

注意：canvas 画布大小不可通过 css 来改变，只能通过属性方式设置，否则可能出现失帧的情况（当使用 css 方式改变 canvas 画布大小时，只是 cavas 标签的大小改变了，正真的绘图区域大小并没有改变，所以出现了失帧的情况）。

示例：

示例：

示例：

示例：

示例：

示例：

示例：

1）参数说明：

参数 x：矩形左上角的 x 坐标。

参数 y：矩形左上角的 y 坐标。

参数 width：矩形的宽度，以像素计。

参数 height：矩形的高度，以像素计。

2） 注意事项：

context.rect(x, y, width, height); 只是创建了矩形，并没有绘制出来。因此，创建完成后需使用 context.stroke(); 来绘制。

3）示例：

1）参数说明：

参数 x：矩形左上角的 x 坐标。

参数 y：矩形左上角的 y 坐标。

参数 width：矩形的宽度，以像素计。

参数 height：矩形的高度，以像素计。

2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

3）示例：

1）参数说明：

参数 x：矩形左上角的 x 坐标。

参数 y：矩形左上角的 y 坐标。

参数 width：矩形的宽度，以像素计。

参数 height：矩形的高度，以像素计。

2）笔触的默认颜色是黑色。

3）可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

4）示例：

1）参数说明：

参数 x：要清除的矩形左上角的 x 坐标。

参数 y：要清除的矩形左上角的 y 坐标。

参数 width：要清除的矩形的宽度，以像素计。

参数 height：要清除的矩形的高度，以像素计。

小技巧：

当 x = 0，y = 0，width = canvas.width，height = canvas.height 时，则可以清除画布上的矩形

2）示例：

1）参数说明：

参数 x：圆中心的 x 坐标。

参数 y：圆中心的 y 坐标。

参数 r：圆的半径。

参数 sAngle：起始角弧度（圆的三点钟位置是0度）。

参数 eAngle：结束角弧度（圆的三点钟位置是0度）。

参数 counterclockwise：规定逆时针还是顺时针绘图。f'alse = 顺时针，true = 逆时针。

2） 角度和弧度的关系：角度/弧度 = 180/pi

3）创建完圆弧后需使用 context.stroke(); 绘制创建的圆弧。

4）示例：绘制一个圆

5）示例：绘制圆上任意一点

圆上任意一点坐标：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)

ox：圆心的 x 坐标。

oy：圆心的 y 坐标。

r：圆的半径。

2）设置字体水平对齐方式

2）设置字体垂直对齐方式

textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。

3）设置文字阴影效果

1）参数说明：

参数 text：文本内容

参数 x：开始绘制文本的 x 坐标位置（相对于画布）。

参数 y：开始绘制文本的 y 坐标位置（相对于画布）。

2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

3）示例：

1）参数说明：

参数 text：文本内容

参数 x：开始绘制文本的 x 坐标位置（相对于画布）。

参数 y：开始绘制文本的 y 坐标位置（相对于画布）。

2）默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

3）示例：

1）参数说明：

参数 img：规定要使用的图像。

参数 x：在画布上放置图像的 x 坐标位置。

参数 y：在画布上放置图像的 y 坐标位置。

2）当图像的大小超出画布的大小时，超出的部分将不会被显示出来。

3）示例：

1）参数说明：

参数 img：规定要使用的图像。

参数 x：在画布上放置图像的 x 坐标位置。

参数 y：在画布上放置图像的 y 坐标位置。

参数 width：要使用的图像的宽度（伸展或缩小图像）。

参数 height：要使用的图像的高度（伸展或缩小图像）。

2）因保持 width/height = img.width/img.height，否则绘制后的图片会失帧。

3）示例：

1）参数说明：

参数 img：规定要使用的图像。

参数 sx：从图像的 sx 坐标位置开始剪切。

参数 sy：从图像的 sy 坐标位置开始剪切。

参数 swidth：剪切的宽度。

参数 sheight：剪切的高度。

参数 x：在画布上放置图像的 x 坐标位置。

参数 y：在画布上放置图像的 y 坐标位置。

参数 width：要使用的图像的宽度（伸展或缩小图像）。

参数 height：要使用的图像的高度（伸展或缩小图像）。

2）因保持 width/height = swidth/sheight，否则绘制后的图片会失帧。

3）示例：

stop：介于 0.0 与 1.0 之间的值，表示渐变中开始(0.0)与结束(1.0)之间的位置。

color：颜色。

示例：