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()