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

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);
           },
           OnMouseMove: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");
               }

           },
           OnMouseDown: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;
               }
           },
           OnMouseUp: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()