canvas- learn to write

First, logical thinking

Initialization time to join the canvas to paint swastika lattice method is very simple, line drawing
Four operations, click (onmousedown), remove (onmouseup), remove (onmouseout), mobile (onmousemove)
Click when the operation: recording the coordinates of the hit area, you can draw
Away, removed when the operation: can not draw
Mobile: recording position changes, the line width of the recording speed changes, the connection lines, the last position the last time, the time constant change width
Speed algorithm, free play

Second, the code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>writeFont</title>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    window.onload = function () {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
      var color = 'green';

      drawGrid();
        context.beginPath ();
        context.save ();
      function drawGrid () {

      Videos swastika lattice //
        context.strokeStyle = "RGB (230,11,9)";
        context.moveTo(3, 3);
        context.lineTo(canvas.width - 3, 3);
        context.lineTo(canvas.width - 3, canvas.height - 3);
        context.lineTo(3, canvas.height - 3);
        context.closePath();

        context.lineWidth = 6;
        context.stroke();

        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(canvas.width, canvas.height);

        context.moveTo(canvas.width, 0);
        context.lineTo(0, canvas.height);

        context.moveTo(canvas.width / 2, 0);
        context.lineTo(canvas.width / 2, canvas.height);

        context.moveTo(0, canvas.width / 2);
        context.lineTo (canvas.width, canvas.height / 2); 
      }
        =. 1 context.lineWidth; 
        context.stroke (); 
        context.restore (); 
      } 

      var = isMouseDown to false; // mouse is depressed 
      var lastLoc = {x: null, y: null}; // location of a mouse 
      var lastTimestamp = 0; // timestamp 
      var lastLineWidth = -1; a line width // 
      // mouse down 
      canvas.onmousedown = function (E) { 
        e.preventDefault (); 
        initLoc (e.clientX, e.clientY ); 
        isMouseDown = to true; 
      } 
      // mouse up 
      canvas.onmouseup = function (E) { 
        e.preventDefault (); 
        isMouseDown = to false; 
      // mouse leaves 
      canvas.onmouseout = function (e) {
        e.preventDefault (); 
        isMouseDown = to false; 
      } 
      // mouse moves 
      canvas.onmousemove = function (E) { 
        e.preventDefault (); 
        IF (isMouseDown) { 
          // Draw 
          var curLoc = windowToCanvas (e.clientX, e.clientY ); // get the current coordinates 
          var curTimestamp = new Date () getTime (); // current time. 
          var S = calcDistance (curLoc, lastLoc); // get the pen moves from 
          var t = curTimestamp - lastTimestamp; // brush time 
          var = calcLineWidth the lineWidth (T, S); 

          context.lineWidth = the lineWidth; 

          context.beginPath ();  
          context.moveTo (lastLoc.x, lastLoc.y);
          context.lineTo (curLoc.x, curLoc.y); 

          context.strokeStyle = Color;
          context.lineCap = "round"
          context.lineJoin = "round"
          context.stroke();

          lastLoc = curLoc;
          lastLineWidth = lineWidth;
          lastTimestamp = curTimestamp;
        }

      }

      //获得canvas坐标
      function windowToCanvas(x, y) {
        var bbox = canvas.getBoundingClientRect();
        return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };
        if(!lastLoc.x){
          lastLoc = { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };
        }
      }
      //初始化上一次loc坐标
      function initLoc(x, y) {
        var bbox = canvas.getBoundingClientRect();
        lastLoc = { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };
      }
      //求两点之间距离
      function calcDistance(loc1, loc2) {
        return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y));
      }
      //求速度
      function calcLineWidth(t, s) {
        var v = s / t;
        var resultLineWidth;
        if (v <= 0.1) {
          resultLineWidth = 30;
        } else if (v >= 10) {
          resultLineWidth = 1;
        } else {
          resultLineWidth = 30 - (v - 0.1) / (10 - 0.1) * (30 - 1);
        }
        if (lastLineWidth == -1) {
          return resultLineWidth;
        }
        return lastLineWidth * 2 / 3 + resultLineWidth * 1 / 3;
      }
    }
  </script>
</body>

</html>

canvas- learn to write

Guess you like