canvas是通过javascript来绘制的2D图形
canvas是控制像素来渲染的
一旦渲染完成,浏览器就不会关注了,如果位置发生变化,整个场景就需要重新绘制
<canvas id="mycanvas" width="500" height="300" ></canvas> <script type="text/javascript"> var c=document.getElementById("mycanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); // 画了一条线 cxt.moveTo(160,0) cxt.lineTo(160,90) cxt.stroke() // 画一个圆 cxt.fillStyle="#FF0000" cxt.beginPath(); cxt.arc(200,100,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); // 图像 var img=new Image() img.src="./video/QQ图片20190529164332.jpg" cxt.drawImage(img,100,100) </script>
Svg是使用xml描述的2D图形
也就意味着svg dom里面每个元素都是可用的,可以使用事件处理器
Svg的属性发生变化,浏览器可以自动重现图形
区别:
canvas svg
分辨率: 依赖 不依赖
支持事件处理: 不支持 支持
文本渲染能力: 弱的文本渲染 最适合带有大型渲染区域的应用程序(比如谷歌地图)
适合游戏: 适合密集型游戏 不适合游戏应用
原文地址:https://www.cnblogs.com/zhuMother/p/12199831.html
时间: 2024-10-30 08:24:45