html5 canvas 标签

Posted 2020-07-06 心随所遇

<canvas id="board" width="500" height="400"></canvas>
<script type="text/javascript">
function drawImg(canvasId, lineWidth, lineColor){
  var canvas = document.getElementById(canvasId);
  var canvasIdJq= ‘#‘ + canvasId;
  if (canvas.getContext){
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = lineWidth; 
    ctx.strokeStyle = lineColor;
    var draw = false;
    $(canvasIdJq).mousedown(function(e){
      var mouseX = e.pageX - this.offsetLeft;//页面横坐标 减去 画板对象的左边距
      var mouseY = e.pageY - this.offsetTop; 
      ctx.moveTo(mouseX,mouseY); //定位到按下鼠标时的位置
      draw = true;
    });
    $(canvasIdJq).mouseup(function(e){
       draw = false;
    });
    $(canvasIdJq).mousemove(function(e){
      var mouseX = e.pageX - this.offsetLeft;
      var mouseY = e.pageY - this.offsetTop; 
        if(draw){
            ctx.lineTo(mouseX,mouseY); //终止位置
            ctx.stroke(); //结束图形
         }
    });
  }
}

drawImg(‘board‘,3,‘red‘);
</script>