码迷,mamicode.com
首页 > 其他好文 > 详细

3.canvas与svg的区别

时间:2020-01-16 10:24:48      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:的区别   mil   line   str   像素   完成   ext   谷歌地图   mic   

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

分辨率:                      依赖                        不依赖

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

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

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

3.canvas与svg的区别

标签:的区别   mil   line   str   像素   完成   ext   谷歌地图   mic   

原文地址:https://www.cnblogs.com/zhuMother/p/12199831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!