canvas 拖拽实现

Canvas

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

SVG

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

 

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

2 canvas： 弱的文本渲染能力(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()