请原谅我的无知，我对HTML5的领域非常陌生，也从未使用Javascript处理过图形。
我在阅读一些内容时发现了Canvas标签，并且文中提到Canvas标签作为一个图形容器，可通过Javascript在网页上呈现图形。
那么我的问题是：为什么我需要使用Canvas来作为绘制图形的占位符，而不是使用其他任意标签作为图形占位符呢？
7个回答
26
一个
这是纯JavaScript编写的，没有从网络中加载任何内容，所有内容都在浏览器中计算完成，包括用于envmapping部分的纹理和射线追踪图像。所有内容仅包含在一个4Kb大小的HTML文件中。
你真的认为可以使用常规的
<canvas>标签和一个<img>标签非常相似，区别在于它不是从网络中加载图片，而是可以使用javascript代码自己绘制图片。你可以绘制线条、圆形、填充多边形、渐变和矩阵变换的图片。你也可以在循环中重新绘制画布内容以制作动画。
要查看使用普通2D渲染（没有WebGL，只有标准的2D渲染）所能做的事情，请查看这个小演示或者这个视频，如果您的浏览器过旧无法支持Canvas，请点击链接查看。这是纯JavaScript编写的，没有从网络中加载任何内容，所有内容都在浏览器中计算完成，包括用于envmapping部分的纹理和射线追踪图像。所有内容仅包含在一个4Kb大小的HTML文件中。
你真的认为可以使用常规的
<div>来做到同样的效果吗？
编辑：
要查看更简单的演示，请查看这个旋转的二十面体，它具有可读的源代码。- 6502
3
现在这很酷 :) 我从未想到过可以在没有第三方库的情况下进行渲染。顺便问一下，我在哪里可以找到有关如何编写这些类型渲染的教程？ - Draco
在网上搜索类似于“HTML 5画布演示”的内容。 - Dave Newton
4@Draco：好的...这里有一个秘密告诉你，JavaScript中的“第三方库”只是由JavaScript代码组成的。真的。使用JavaScript编写的任何东西都可以做到JavaScript“第三方库”所能做到的。没有魔法...只有代码。我旧的汇编程序Torus演示中使用的技术可以追溯到以前通过绘制所有所需像素来完成软件三维渲染的时代。而JavaScript Torus则使用了Canvas 2D基本图形，这些图形通常是硬件加速的。例如，请参阅https://dev59.com/l2445IYBdhLWcg3wnrki#4774298 - 6502
5
Canvas 旨在进行图形操作，而 div 并非如此。从语义上讲，您应该使用 Canvas。
- Oded
4
您无法在任意元素上绘制。
- Dave Newton
3
< p >Canvas 允许您以可接受的速度操作像素。您可以绘制各种形状，设置像素颜色等。通过 div，您只能呈现标准 HTML 元素。< /p >
- bjornd
2
是其他标签的容器，
CANVAS是像素的容器。尽管在普通的
中绘图可能可以做到你想要做的一切，但是通过
CANVAS，浏览器知道这个区域将包含图形，并可以相应地使用该信息。- jmtd
1
无论你如何努力，都不能在 div 元素上绘制。 - Rob
1
为什么要使用画布(canvas)：
1- 画布(canvas)是安全的，且兼容多平台。
2- 它有很多现成的动画函数可供使用。
3- 您可以玩转速度、像素和颜色。
4- 您可以将画布(canvas)的结果保存为图像。
5- 您可以使用画布(canvas)专业地实现游戏。点击此处查看
简单来说，它就像Flash一样，但没有插件。
有用的库：
- easel js：类似Flash的库
- processing js：开源动画库
- Alex
0
使用绘图
<canvas>
当使用此功能时，进入网页时将立即加载。
<img>
需要更长的时间。
- user939222
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
canvas做出酷炫的东西。 - thirtydot