JS canvas realizes the functions of drawing board and signature board

This article shares the specific code of JS canvas to realize the drawing board/signature board function for your reference. The specific content is as follows

Preface

An electronic blackboard in a common electronic classroom.

Features of this article:

Native JS
Packaged modules

Minimal code example

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script>
 let c = document.getElementById('canvas');
 c.width = window.innerWidth;
 c.height = window.innerHeight;
 let ctx = c.getContext('2d');

 // draw one black board
 ctx.fillStyle = "black";
 ctx.fillRect(0,0,600,300);

 // Press the flag let onoff = false,
  oldx = -10,
  oldy = -10;

 // Set the color let linecolor = "white";

 // Set line width let linw = 4;

 // Add mouse event // Press c.addEventListener('mousedown', event => {
  onoff = true;
  // Position - 10 is to correct the position and put the drawing at the top of the mouse pointer oldx = event.pageX - 10;
  oldy = event.pageY - 10;
 },false);
 // Move c.addEventListener('mousemove', event => {
  if(onoff == true){
  let newx = event.pageX - 10,
   newy = event.pageY - 10;

  // Drawing ctx.beginPath();
  ctx.moveTo(oldx,oldy);
  ctx.lineTo(newx,newy);
  ctx.strokeStyle = linecolor;
  ctx.lineWidth = linw;
  ctx.lineCap = "round";
  ctx.stroke();
  // Update the coordinate position every time you move oldx = newx,
  oldy = newy;
  }
 }, true);
 // Pop up c.addEventListener('mouseup', ()=> {
  onoff = false;
 },false);
 </script>
</body>
</html>

Results

Code Explanation

Ideas

1. Press the mouse to start drawing. Mouse down event.
2. The mouse pops up to end drawing. Mouse up event.
3. Press and move the mouse to draw the path. Mouse move event.

Code Explanation

The overall idea is: press the mouse to trigger the moving switch, start recording the line after moving (use the coordinates after moving - the coordinates before moving, and then draw the line), and each movement will update the old coordinates. After releasing the mouse, release the move switch.

1. The effect of moving the drawing will only be triggered when the mouse is pressed, so a state judgment needs to be added.
2. Because there is an offset between the mouse pointer and the actual position, when positioning the coordinates, you need to increase pagex-10 so that the coordinates are located at the tip of the pointer.
3. Update the coordinate position every time you move, and use small line segments to simulate irregular lines.

Encapsulation Module

<canvas id="canvas"></canvas>
<script>
 class Board{
 constructor(canvasName = 'canvas', data = new Map([
  ["onoff", false],
  ["oldx", -10],
  ["oldy", -10],
  ["fillStyle", "black"],
  ["lineColor", "white"],
  ["lineWidth", 4],
  ["lineCap", "round"],
  ["canvasWidth", window.innerWidth],
  ["canvasHeight", window.innerHeight]
 ])){
  // this.data = data;
  this.c = document.getElementById(canvasName);
  this.ctx = this.c.getContext('2d');
  this.onoff = data.get("onoff");
  this.oldx = data.get("oldx");
  this.oldy = data.get("oldy");
  this.lineColor = data.get("lineColor");
  this.lineWidth = data.get("lineWidth");
  this.lineCap = data.get("lineCap");

  this.c.width = data.get("canvasWidth");
  this.c.height = data.get("canvasHeight");

  this.ctx.fillStyle = data.get("fillStyle");
  this.ctx.fillRect(0,0,600,300);
 }

 eventOperation(){
  // Add mouse event // Press this.c.addEventListener('mousedown', event => {
  this.onoff = true;
  // Position - 10 is to correct the position and put the drawing at the top of the mouse pointer this.oldx = event.pageX - 10;
  this.oldy = event.pageY - 10;
  },false);
  // Move this.c.addEventListener('mousemove', event => {
  if(this.onoff == true){
   let newx = event.pageX - 10,
   newy = event.pageY - 10;

   // Drawing this.ctx.beginPath();
   this.ctx.moveTo(this.oldx,this.oldy);
   this.ctx.lineTo(newx,newy);

   this.ctx.strokeStyle = this.lineColor;
   this.ctx.lineWidth = this.lineWidth;
   this.ctx.lineCap = this.lineCap;
   
   this.ctx.stroke();
   // Update the coordinate position every time you move this.oldx = newx,
   this.oldy = newy;
  }
  }, true);
  // Pop up this.c.addEventListener('mouseup', ()=> {
  this.onoff = false;
  },false);
 }

 }

 let board = new Board();
 board.eventOperation();
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: