BloggerAds

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>

沒有留言:

張貼留言