为什么要使用HTML 5 Canvas标签?

时间:2011-09-09 13:23:19

标签: javascript html html5

原谅我的无知,但我是HTML 5竞技场的新手,并且从未使用过Javascript来处理图形。

我正在做一些阅读并遇到Canvas标签,并且源声明canvas标签充当图形容器,用于通过使用Javascript在网页上呈现图形。

我的问题是,为什么我需要使用 Canvas 作为占位符来渲染图形,而不是使用其他可以用作图形占位符的任意标记?

7 个答案:

答案 0 :(得分:24)

<canvas>标记与<img>标记完全相同,区别在于您可以使用javascript代码自行绘制,而不是从网络加载图像。 您可以绘制线条,圆形,填充多边形,渐变和矩阵变换图片。您还可以在循环中重绘画布内容以制作动画。

要了解如何使用普通画布2d(没有webgl,只是标准的2d渲染),请查看at this small demo或查看this video如果您的浏览器太旧并且不支持画布。

它是纯粹的javascript,没有从网络加载,一切都在浏览器中计算,包括纹理和用于envmapping部分的光线追踪图像。全部在一个4Kb html文件中。

你真的认为你可以使用常规<div>来做同样的事情吗?

编辑:

对于具有可读来源的更简单的演示,您可以查看this rotating icosahedron

答案 1 :(得分:5)

Canvas 意图用于图形操作,而div则不是。在语义上,您应该使用Canvas

答案 2 :(得分:4)

你不能在任意元素上绘制。

答案 3 :(得分:3)

Canvas允许您以可接受的速度操纵像素。您可以绘制各种形状,设置像素等颜色。使用div,您只能渲染标准HTML元素。

答案 4 :(得分:2)

DIV是其他标签的容器。 CANVAS是像素的容器。

虽然(可能)可以在普通的DIV内完成您想要做的所有事情,但是CANVAS浏览器在语义上知道该区域将包含图形并且可以使用相应的信息。

浏览器本身支持CANVAS的各种绘图例程,而你必须在JS中为DIV完全自己烹饪。

关于HTML5画布的信息非常好的资源是http://diveintohtml5.ep.io/canvas.html

答案 5 :(得分:1)

为什么要使用canvas:
1- canvas可以安全使用并与多平台兼容。
2-它在动画中有很多准备好的功能。
3-你可以玩速度,像素,颜色。
4-你可以将画布的结果保存为图像。 5-你可以用帆布实现专业游戏。 check here

简单地说它就像闪存但没有插件。

usefaul库使用:
- easel js:像图书馆一样闪光 - processing js:打开souece动画库

答案 6 :(得分:0)

使用

绘图
<canvas> 

进入使用此网页的网页时会立即加载

<img>  

需要更长的时间。