3.canvas与svg的区别

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

分辨率：                      依赖                        不依赖

支持事件处理:            不支持                       支持

文本渲染能力:       弱的文本渲染        最适合带有大型渲染区域的应用程序（比如谷歌地图）

适合游戏：          适合密集型游戏          不适合游戏应用