2013年10月4日 星期五
[Android] HTML 在畫布上畫圖(canvas)
<canvas id="t_canvas" width="400" height="400"></canvas>
<Script type="text/javascript">
var x = 0;
var y = 0;
var isPaint = false;
var canvas = document.getElementById('t_canvas');
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0,0,400,400);
canvas.onmousedown = function (event){
isPaint = true;
};
canvas.onmouseup = function (event){
isPaint = false;
};
canvas.onmousemove = function (event){
if (isPaint){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(event.x,event.y);
ctx.strokeStyle = "red";
ctx.stroke();
}
x = event.x;
y = event.y;
};
function ctx_save(){
imgData = ctx.getImageData(0,0,400,400);
}
function ctx_restore(){
ctx.putImageData(imgData,0,0);
}
function ctx_clear(){
ctx.clearRect(0,0,400,400);
}
</Script>
<input type="button" value="save" onclick="ctx_save()"></input>
<input type="button" value="restore" onclick="ctx_restore()"></input>
<input type="button" value="clear" onclick="ctx_clear()"></input>
訂閱:
張貼留言 (Atom)
沒有留言:
張貼留言