html5 canvas 使用範例 _html5教學技巧

複製程式碼

程式碼如下:

铅笔
直线
矩形
圆形
椭圆

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var _canvas = document.getElementById('canvas_temp');
var _context = _canvas.getContext('2d');
var tools= document.getElementById('tools');
工具。 onchange = function (e){
工具[this. value]();
};
var tool = {
pen:function (){
this.reset();
_canvas.onmousedown=function (e){
_context.moveTo(e.layerX,e.layerY);
_canvas.onmousemove=function (e){
_context.lineTo(e.layerX,e.layerY);
_context.lineTo(e.layerX,e.layerY);
_context.中風();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
}
};
},
line:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo_contexte. layerX,_e.layerY);
_context.lineTo(e.layerX,e.layerY);
_context.lineTo();
_context.closePath();
行程 };
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
rect:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_context.StrongStyle="#000";
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_contexte. layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
Circle:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e
;
;
;
;
;
;
;
;
; _canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.arc(_e.layerX、_e. .layerY,e.layerX-_e.layerX,0,Math.PI*2,true);
_context.行程();
_context.closePath();
};
_canvas. onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
簡單:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
var st=0;
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo(_e.layerX (e.layerX-_e.layerX)*Math.cos(st), _e.layerY (e.layerX-_e.layerX)*Math.sin(st));
st =1/180*數學.PI;
for(var i=0;i _context.lineTo(_e.layerX (e.layerX-_e.layerX)*Math.cos(st),_e.layerY (e. layerY-_e.layerY)*Math.sin(st));
st =1/180*Math.PI;
}
_context.中風();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
重置:function (){
_canvas.onmousedown=null;
_canvas.onmouseup=null;
_canvas.onmousemove=null } updata:function (){
context.drawImage(_canvas, 0, 0);
_context.clearRect(0, 0, canvas.width, canvas.height);

} }; 工具['筆']();