canvas绘图

最新推荐文章于 2024-11-05 15:45:40 发布

原创最新推荐文章于 2024-11-05 15:45:40 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

本文介绍了一个基于HTML5 Canvas实现的手绘涂鸦应用。通过监听鼠标事件，使用JavaScript完成连续绘制线条的功能，并实现了简单的开始、结束绘制逻辑。文章详细展示了如何设置画布属性及绘制过程中的关键代码。


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