首页 > 代码库 > 代码开发角度分析 svg canvas的不同

代码开发角度分析 svg canvas的不同

2024-08-07 06:30:20   214人阅读

Canvas

  • 依赖分辨率
  • 不支持事件处理器  
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

 

1 canvas：不支持事件处理,所以必须有一部分逻辑来做 来做模拟事件 和dom对象的作用。一般会使用一个基本的canvas库

2 canvas： 弱的文本渲染能力 

3 相较于svg 对于浏览器来说 dom的复杂度会直接影响浏览器的效率。（崩溃 白屏 死机 ）

 写个canvas 拖拽的demo

       var Draw={           init:function(){               this.cObj=document.getElementById("myCanvas").getContext("2d");               this.event()               this.draw.prototype=this               this.p=new  this.draw(45,45,70,70,"red")  /*             window.setTimeout(function(){                   this.p.draw(45,145,70,70,"red")               }.bind(this),2000)*/           },           draw:function(x,y,w,h,color){               this.cObj.clearRect(this.x-1,this.y-1,this.w+2,this.h+2);               this.x=x               this.y=y               this.w=w               this.h=h               this.color=color               this.cObj.strokeStyle=this.color               this.cObj.strokeRect(this.x,this.y,this.w,this.h);           },           onm ouseMove:function(evt){               if(this.p.isDown){                   var X=evt.layerX-this.p.w/2;                   var Y=evt.layerY-this.p.h/2;                   this.p.draw(X,Y,70,70,"red");               }           },           onm ouseDown:function(evt){               var X=evt.layerX;               var Y=evt.layerY;               if(X<this.p.x+this.p.w&&X>this.p.x)               {                   if(Y<this.p.y+this.p.h&&Y>this.p.y){                       this.p.isDown=true;                   }               }               else               {                  this.p.isDown=false;               }           },           onm ouseUp:function(){               this.p.isDown=false           },           event:function(){               var canvas=document.getElementById("myCanvas")               canvas.addEventListener("mousedown",this.OnMouseDown.bind(this),false);               canvas.addEventListener("mousemove",this.OnMouseMove.bind(this),false);               canvas.addEventListener("mouseup",this.OnMouseUp.bind(this),false);           }       }        Draw.init()

　　

　　

代码开发角度分析 svg canvas的不同


联系
我们