JS canvas實現(xiàn)畫板和簽字板功能

更新時間：2021年02月23日 12:05:23 作者：莫兮是我

這篇文章主要為大家詳細介紹了JS canvas實現(xiàn)畫板和簽字板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS canvas實現(xiàn)畫板/簽字板功能的具體代碼，供大家參考，具體內(nèi)容如下

前言

常見的電子教室里的電子黑板。

本文特點：

原生JS
封裝好的模塊

最簡代碼樣例

<!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);

 // 按下標(biāo)記
 let onoff = false,
  oldx = -10,
  oldy = -10;

 // 設(shè)置顏色
 let linecolor = "white";

 // 設(shè)置線寬
 let linw = 4;

 // 添加鼠標(biāo)事件
 // 按下
 c.addEventListener('mousedown', event => {
  onoff = true;
  // 位置 - 10是為了矯正位置，把繪圖放在鼠標(biāo)指針的頂端
  oldx = event.pageX - 10;
  oldy = event.pageY - 10;
 },false);
 // 移動
 c.addEventListener('mousemove', event => {
  if(onoff == true){
  let newx = event.pageX - 10,
   newy = event.pageY - 10;

  // 繪圖
  ctx.beginPath();
  ctx.moveTo(oldx,oldy);
  ctx.lineTo(newx,newy);
  ctx.strokeStyle = linecolor;
  ctx.lineWidth = linw;
  ctx.lineCap = "round";
  ctx.stroke();
  // 每次移動都要更新坐標(biāo)位置
  oldx = newx,
  oldy = newy;
  }
 }, true);
 // 彈起
 c.addEventListener('mouseup', ()=> {
  onoff = false;
 },false);
 </script>
</body>
</html>

結(jié)果展示

代碼講解

思路

1、鼠標(biāo)按下，開始描畫。鼠標(biāo)按下事件。
2、鼠標(biāo)彈起，結(jié)束描畫。鼠標(biāo)彈起事件。
3、鼠標(biāo)按下移動，路徑畫線。鼠標(biāo)移動事件。

代碼講解

整體思路：按下鼠標(biāo)，觸發(fā)移動的開關(guān)，移動后開始記錄線條（用移動后的坐標(biāo)-移動前的坐標(biāo)，然后繪線），每次移動都會更新舊坐標(biāo)。松開鼠標(biāo)后，釋放移動開關(guān)。

1、只有在鼠標(biāo)按下，才會觸發(fā)移動繪圖的效果，所以需要增加一個狀態(tài)判斷。
2、因為鼠標(biāo)指針和實際位置有一個偏移量，所以在坐標(biāo)定位的時候，需要增加pagex-10從而使坐標(biāo)位于指針的尖端處。
3、每次移動都要更新坐標(biāo)位置，用小段的線段來模擬不規(guī)則的線。

封裝模塊

<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(){
  // 添加鼠標(biāo)事件
  // 按下
  this.c.addEventListener('mousedown', event => {
  this.onoff = true;
  // 位置 - 10是為了矯正位置，把繪圖放在鼠標(biāo)指針的頂端
  this.oldx = event.pageX - 10;
  this.oldy = event.pageY - 10;
  },false);
  // 移動
  this.c.addEventListener('mousemove', event => {
  if(this.onoff == true){
   let newx = event.pageX - 10,
   newy = event.pageY - 10;

   // 繪圖
   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();
   // 每次移動都要更新坐標(biāo)位置
   this.oldx = newx,
   this.oldy = newy;
  }
  }, true);
  // 彈起
  this.c.addEventListener('mouseup', ()=> {
  this.onoff = false;
  },false);
 }

 }

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: