首先简单说一下Canvas
canvas是H5中新增的标签,官方解释说canvas是一块画布,可以在网页中绘制图像,话不多说,来个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
在使用canvas时候,不可用css来定义canvas的宽度
因为当画布缩放的同时,内部的图像也会随之缩放,这是就会出现图像失真的情况
*/
canvas{
background-color: #aaa;
}
</style>
</head>
<body>
<canvas width="500" height="500">浏览器不支持canvas</canvas> //这就是canvas标签,当浏览器不支持canvas标签的时候就会在浏览器展示出浏览器不支持canvas这段话
<script>
var canvas = document.querySelector("canvas")
//绘图环境
var ctx = canvas.getContext("2d")
function img(){
//ctx.drawImage(图像对象,坐标,宽高)
var imgObj = new Image() //new一个图像对象
imgObj.src="./img.jpg"
//在这里要注意,一点要在imgObj.onload内部再使用ctx.drawImage,否则会画图失败
imgObj.onload = function (){
ctx.drawImage(imgObj,100,100,300,300)
}
// ctx.drawImage(imgObj,100,100,300,300)
}
img()
</script>
</body>
</html>
再了解一下svg
svg即可缩放矢量图形,什么是矢量图形呢,也就是放大或者缩小不会失真的图形。svg绘图时,每个图形都是以DOM节点的形式插入到页面中的,我们可以通过js来直接操作这些图形。
区别
- Canvas 主要是用笔刷来绘制 2D 图形的。
- SVG 主要是用标签来绘制不规则矢量图的。
- 相同点:都是主要用来画 2D 图形的。
- 不同点:Canvas 画的是位图,SVG 画的是矢量图。
- 不同点:SVG 节点过多时渲染慢,Canvas 性能更好一点,但写起来更复杂。
- 不同点:SVG 支持分层和事件,Canvas 不支持,但是可以用库实现。