javascript 为什么要使用 HTML 5 Canvas 标签？

Why use the HTML 5 Canvas tag?

提问by Draco

Forgive me my ignorance but I am very new to the HTML 5 arena and never worked with graphics using Javascript.

请原谅我的无知，但我对 HTML 5 领域非常陌生，从未使用过 Javascript 处理图形。

I was doing some reading and came across the Canvas tag and the source stated that the canvas tag acts as a graphics container and is used to render graphics on the webpage by the use of Javascript.

我在做一些阅读时遇到了 Canvas 标签，消息来源指出 canvas 标签充当图形容器，用于通过使用 Javascript 在网页上呈现图形。

My questions is, why would I need to use Canvasas a placeholder to render graphics instead of using some other arbitrary tag that can be used as a graphics placeholder for example?

我的问题是，为什么我需要使用Canvas作为占位符来渲染图形，而不是使用其他一些可以用作图形占位符的任意标签？

回答by 6502

A <canvas>tag is exactly like an <img>tag, with the difference that instead of loading the image from the network you can draw it yourself with javascript code. You can draw lines, circles, filled polygons, gradients and matrix-transformed pictures. You can also redraw the canvas content in a loop to make an animation.

一个<canvas>标签是完全一样的<img>标签，与而不是从网络加载图像，你可以用JavaScript代码，自己绘制它的差异。您可以绘制线条、圆形、填充多边形、渐变和矩阵转换图片。您还可以循环重绘画布内容以制作动画。

To see what you can do with a plain canvas 2d (no webgl, just standard 2d rendering) take a look at this small demoor look at this videoif your browser is too old and doesn't support canvas.

要了解使用普通的 2d 画布（没有 webgl，只有标准的 2d 渲染）可以做什么，请查看此小演示，如果您的浏览器太旧且不支持画布，请查看此视频。

It's pure javascript, nothing loaded from the network, everything is computed in the browser, including the texture and the raytraced image used for envmapping part. All in a single 4Kb html file.

它是纯 javascript，没有从网络加载任何内容，一切都在浏览器中计算，包括纹理和用于 envmapping 部分的光线跟踪图像。所有这些都在一个 4Kb 的 html 文件中。

Do you really think you can do the same using regular <div>s ?

你真的认为你可以用普通的<div>s做同样的事情吗？

EDIT:

编辑：

For a much simpler demo with a readable source you can check out this rotating icosahedron.

对于具有可读源的更简单的演示，您可以查看这个旋转二十面体。

回答by Oded

Canvasis intendedfor graphics manipulation, whereas divisn't. Semantically, you should be using Canvas.

Canvas是打算用于图形处理，而div不是。从语义上讲，您应该使用Canvas.

回答by Dave Newton

You can't draw on arbitrary elements.

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

回答by bjornd

Canvas allows you to manipulate pixels with acceptable speed. You can draw various shapes, set colors for pixels etc. With div you can only render standard HTML elements.

Canvas 允许您以可接受的速度操作像素。您可以绘制各种形状，为像素设置颜色等。使用 div 您只能呈现标准的 HTML 元素。

回答by jmtd

DIVis a container for other tags. CANVASis a container for pixels.

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

Whilst it is (probably) possible to do everything you want to do drawing-wise inside a plain DIV, with CANVASthe browser knows semantically that the area is going to contain graphics and can use that information accordingly.

虽然（可能）有可能在一个普通的内做任何你想做的绘图DIV，CANVAS浏览器在语义上知道该区域将包含图形并可以相应地使用该信息。

Browsers support a variety of drawing routines for CANVASnatively, whereas you'd have to cook your own entirely in JS for DIV.

浏览器支持各种原生的绘图例程CANVAS，而您必须完全在 JS 中为DIV.

A really good resource for information on the HTML5 canvas is http://diveintohtml5.ep.io/canvas.html

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

回答by Alex

Why use canvas:
1- canvas is secure to use and compatible with multi platform.
2- it have a lot of ready function to use in animation.
3- you can play with speed, pixels, colors.
4- you can save result of canvas as image. 5- you can implement professionally games with canvas. check here

为什么使用画布：
1-画布使用安全且与多平台兼容。
2-它有很多现成的功能可以在动画中使用。
3-您可以玩速度，像素，颜色。
4-您可以将画布的结果保存为图像。5-您可以使用画布实现专业游戏。在这里检查

simply it is act like flash but with no plug-ins.

简单地说，它就像 flash 一样，但没有插件。

usefaul libraries to use:
- easel js: flash like library
- processing js: open souece animation library

要使用的有用库：
-画架 js：类似 Flash 的库
-处理 js：打开源动画库

回答by user939222

Drawing using

绘图使用

<canvas> 

Will load straight away when entering a webpage with this in use, where an

进入正在使用的网页时将立即加载，其中

<img>  

Will take much longer.

需要更长的时间。