canvas绘图

最新推荐文章于 2024-09-08 13:13:25 发布

iteye_13271

最新推荐文章于 2024-09-08 13:13:25 发布

阅读量116

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/iteye_13271/article/details/82674327

版权


 <canvas id="tetris" width="1800" height="900"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("tetris");
  var context = canvas.getContext("2d");

  var isDown = false;
  var prePoint = null;
  context.strokeStyle="#ea7421";
  context.lineWidth = 5;
  context.lineCap = 'round';
  canvas.onmousedown = function(){
   isDown = true;
  };
  canvas.onmouseup = function(){
   isDown = false;
   prePoint = null;
  }
  canvas.onmousemove = function(e){
   if(isDown){
    context.beginPath();
    if(!prePoint){
     prePoint = {
      x: e.clientX,
      y: e.clientY
     };
    }else{
     context.moveTo(prePoint.x, prePoint.y);
     prePoint = {
       x: e.clientX,
       y: e.clientY
      };
     context.lineTo(prePoint.x, prePoint.y);
     context.stroke();
     context.closePath();
    }
   }
  }
  canvas.onclick = function(e){
   context.beginPath();
   context.moveTo(e.clientX-1, e.clientY);
   context.lineTo(e.clientX, e.clientY);
   context.stroke();
   context.closePath();
  };
 </script>