canvas学习相关的一点东西

转载

mb5fdcad5445be3 2017-09-26 22:02:00

文章标签 canvas html ajax jquery javascript 文章分类 JavaScript 前端开发

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px dashed black;
    }
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
   <canvas id="canvas" width="490" height="220"></canvas>
   <div style="margin-left:100px; margin-top: 200px; width:200px; height:100px; border:1px solid red; position:relative;">
       <div id="inner" style="width: 10px; height:10px; background-color: green; position: relative; left: 10px; "></div>
   </div>
   <script>
   context = document.getElementById('canvas').getContext("2d");

   $('#canvas').mousedown(function(e){
        console.log(e);
      var mouseX = e.pageX - this.offsetLeft;
      var mouseY = e.pageY - this.offsetTop;

      paint = true;
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      redraw();
    });

    $('#canvas').mousemove(function(e){
      if(paint){
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
      }
    });

    $('#canvas').mouseup(function(e){
      paint = false;
    });

    $('#canvas').mouseleave(function(e){
      paint = false;
    });

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    function addClick(x, y, dragging)
    {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
    }

    function redraw(){
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#df4b26";
      context.lineJoin = "round";
      context.lineWidth = 5;

      for(var i=0; i < clickX.length; i++) {        
        context.beginPath();
        if(clickDrag[i] && i){
          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i]-1, clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();
         context.stroke();
      }
    }
   </script>
</body>
</html>