html之SVG和canvas的区别
canvas和svg都允许在浏览器上创建图形，但是根本上是不同的。
SVG
- SVG是一种使用XML描述的2D图形
- SVG基于XML，这意味着SVG Dom的每个元素都是可用的，可以为某个元素附加js事件处理器
- SVG中，每个被绘制过的图形均视为对象，如果SVG对象的属性发生变化，那么浏览器可以自行重现图形
- 画出的图形是矢量图，所以不能引入普通的图形，但是矢量图放大不会失真，所以适合做地图
- 绘制图形一般使用标签来实现
Canvas
canvas是html5提供的新元素，而svg存在的时间长。
- canvas通过js绘制2d图形
- canvas是逐像素进行渲染的
- 在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。
- 画出的是标量图，引入的是jpg，png
- 绘制图形一般通过js实现
- canvas绘制的图形不能被搜索引擎抓取
比较
Canvas
- 依赖分辨率
- 不支持事件处理器
- 文本渲染力弱
- 能够以 .png 或 .jpg 的格式保存结果图形
- 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
- 不适合游戏的应用
- 复杂度高会减慢渲染的速度
- 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签
使用
<body>
<!-- 创建canvas元素 -->
<canvas id="myCanvas" onmousemove="getC(event)" onmouseout="clearC()"></canvas>
</body>
<script>
// 绘图要通过js
var c=document.getElementById("myCanvas");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符
var cxt=c.getContext("2d");
// 红色矩形
cxt.fillStyle="#FF0000"
// 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
cxt.fillRect(0,0,150,75);
// moveto为起点，lintto为终点，第二个lineto为第二条线的终点
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
// 圆
cxt.fillStyle="yellow"
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
// 线性渐变
cxt.beginPath();
var grd=cxt.createLinearGradient(100,70,175,50);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
cxt.fillStyle=grd;
cxt.arc(100,70,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
// 插入图片，我也不知道为啥这不灵
var img=new Image();
img.src='02.jpg';
cxt.drawImage(img,0,0);
// 得到坐标
function getC(event){
x=event.clientX;
y=event.clientY;
console.log("x= "+x+" y= "+y);
}
function clearC(){
//空
}
</script>
<style>
#myCanvas{
width: 200px;
height: 100px;
}
</style>
</html>
投递博世等公司7个岗位 >