Canvas与SVG的主要区别
- 图像类别:Canvas是基于像素的位图,SVG基于XML的矢量图形;
- 渲染模式:Canvas是逐像素进行渲染,一旦绘制完成就不会被浏览器继续关注。而SVG是通过DOM操作来显示,SVG中被绘制的图形都被视为对象,若对象的属性发生变化,浏览器能自动重现图形,但当节点过多时渲染会很慢;
- SVG支持分层和事件,Canvas不支持,要使用库来实现;
Canvas的使用
示例
1 | <canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;">您的浏览器不支持canvas</canvas> |
判断点击事件
1 | function getEventPosition(event) { |
加载图片
1 | ctx = clearRect(0,0, canvas.width, canvas.height); |
计算文字宽度及长度
1 | function measureText(fontSize, fontFamily, fontWeight, text) { |
SVG的使用
基本形状
1 | <svg> 包裹并定义整个矢量图形 |
画笔特性
1 | stroke 画笔颜色,默认为 none |
填充特性
1 | fill 默认为 black |
示例
1 | <body> |