SVG & Canvas $webGL

时间 2019-12-01

标签 svg canvas webgl 繁體版

原文原文链接

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每一个元素都是可用的。您能够为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每一个被绘制的图形均被视为对象。若是 SVG 对象的属性发生变化，那么浏览器可以自动重现图形。javascript

Canvas

Canvas 经过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续获得浏览器的关注。若是其位置发生变化，那么整个场景也须要从新绘制，包括任何或许已被图形覆盖的对象。html

Canvas 与 SVG 的比较java

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
可以以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘web

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（好比谷歌地图）
复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
不适合游戏应用canvas

//canvas
<!DOCTYPE HTML>
<html>
<body>

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

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

//svg

SVG 有一些预约义的形状元素，可被开发者使用和操做：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

canvas应该是2D画布，3D的话就是用webgl。
three.js浏览器