Of Stack

Scratch music realized by native JavaScript

  • 2021-08-28 19:04:35
  • OfStack

In this paper, we share the specific code of JavaScript to realize scratch music for your reference. The specific contents are as follows

Principle

When the mouse is pressed and moved, the effect of scratch music is realized, that is, when the mouse is pressed and moved, the canvas is cleared. Release the mouse, and when the mouse moves, it will no longer clear the canvas, so it will have to clear the event.

canvas Canvas

1. Get canvas elements 


var canvas = document.getElementById('canvas');

2. Get the drawing object getContext 


var ctx = canvas.getContext('2d');

3. Draw a line 


ctx.lineWidth = 3;// Line width 
ctx.strokeStyle = 'red';// Line color 
// The starting position  moveTo(x,y);
// End position lineTo(x,y)
// Execute stroke()

4. Rectangular ctx. rect (x, y, width, height); 


ctx.rect(0,0,300,150);
ctx.fillStyle = '#ccc';// Filling color 
ctx.fill();// Execute 
ctx.clearRect(e.clientX,e.clientY,20,20);// Clear rectangle

Page

1. Page structure 


<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize"> Thank you for your patronage </div>

2. Style 


.prize {
 width: 300px;
 height: 150px;
 text-align: center;
 line-height: 150px;
 margin-top:-150px;
 color: red;
 font-size: 20px;
}

3. Animation 


// Get canvas elements 
 var canvas = document.getElementById('canvas');
 //  Get the drawing object 
 var ctx = canvas.getContext('2d');
 ctx.lineWidth = 3;// Line width 
 ctx.strokeStyle = 'red';// Line color 
 // The starting position  moveTo(x,y);
 // End position lineTo(x,y)
 // Execute stroke()

 // Rectangle 
 ctx.rect(0,0,300,150);
 ctx.fillStyle = '#ccc';// Filling color 
 ctx.fill();// Execute 
 ctx.clearRect(e.clientX,e.clientY,20,20);
 //  Press 
 canvas.onmousedown = function (e){
  // Moving 
  canvas.onmousemove = function (e) {
   // ctx.lineTo(e.clientX,e.clientY);
   // ctx.lineTo(100,100)
   // ctx.stroke();
   ctx.clearRect(e.clientX,e.clientY,20,20);// Clear 
  }
 }
 canvas.onmouseup = function (e) {
  canvas.onmousemove = null;
 }
 //  Change the winning information 
 var arr = ['1 Billions ',' Cash 500','100 Dollar phone bill ',' Tencent Video VIP Monthly card ',' Thank you for your patronage '],
  prize = document.querySelector('.prize'),
  random = Math.floor(Math.random()*arr.length);
 prize.innerText = arr[random];

Complete source code 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  /*----------js Scratch music ------------*/
  .prize {
   width: 300px;
   height: 150px;
   text-align: center;
   line-height: 150px;
   margin-top:-150px;
   color: red;
   font-size: 20px;
  }
 </style>
</head>
<body>
<!--js Scratch music -->
<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize"> Thank you for your patronage </div>

<script>
 // ------------js Scratch music -----------
 // Get canvas elements 
 var canvas = document.getElementById('canvas');
 //  Get the drawing object 
 var ctx = canvas.getContext('2d');
 ctx.lineWidth = 3;// Line width 
 ctx.strokeStyle = 'red';// Line color 
 // The starting position  moveTo(x,y);
 // End position lineTo(x,y)
 // Execute stroke()

 // Rectangle 
 ctx.rect(0,0,300,150);
 ctx.fillStyle = '#ccc';// Filling color 
 ctx.fill();// Execute 
 ctx.clearRect(e.clientX,e.clientY,20,20);
 //  Press 
 canvas.onmousedown = function (e){
  // Moving 
  canvas.onmousemove = function (e) {
   // ctx.lineTo(e.clientX,e.clientY);
   // ctx.lineTo(100,100)
   // ctx.stroke();
   ctx.clearRect(e.clientX,e.clientY,20,20);// Clear 
  }
 }
 canvas.onmouseup = function (e) {
  canvas.onmousemove = null;
 }
 //  Change the winning information 
 var arr = ['1 Billions ',' Cash 500','100 Dollar phone bill ',' Tencent Video VIP Monthly card ',' Thank you for your patronage '],
  prize = document.querySelector('.prize'),
  random = Math.floor(Math.random()*arr.length);
 prize.innerText = arr[random];
 // ------------js Scratch music -----------
</script>
</body>
</html>
Related articles: