扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
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：颜色。
示例：
使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下：
每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形
首先是绘制图形的方法，如下：
function myAnimation() {
ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
if (x_icon 0 || x_icon canvas_size_x - size_x) {
stepX = -stepX;
}
if (y_icon 0 || y_icon canvas_size_y - size_y) {
stepY = -stepY;
}
x_icon += stepX;
y_icon += stepY;
ctx.drawImage(anim_img, x_icon, y_icon);
}
以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。
canvas动态的绘制拓扑图
1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法
canvas定义和用法：
Canvas 对象表示一个 HTML 画布元素 -canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
canvas 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，canvas 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。
提示：如果希望学习如何使用 canvas 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。
使用 canvas 标记绘图
大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 canvas 图形，必须要么自己绘制它再用位图图像合并它，或者在 canvas 上方使用 CSS 定位来覆盖 HTML 文本。
Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
width 属性
画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网