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