Html5 +javascript to make simple sketchpad attached

  • 2020-03-30 02:45:26
  • OfStack

As shown in figure:

< img SRC = "border = 0 / / 201432515258 ">  

The code is as follows:
<!DOCTYPE html> 
<meta http-equiv="content-type" Content="text/html;charset=utf-8"> 

<title> Simple drawing board </title> 

#eraseImg{ /**/ 
border-radius: 118px; 
width: 5px; 
height: 5px; 
position: absolute; 
display: none; 

display: inline-block; 

<script src="jquery-1.7.1.js"></script> 

var c;//Gets the 2d drawing board
var painting = false;//Judge whether drawing, that is, the left mouse button is long press down
var canvas;// Drawing board  

$(".eraseSeries").hide();//The initial state radio button group is hidden

c.lineCap="round";//Set the corner of the handwriting, otherwise the handwriting will appear a fault
c.strokeStyle="black";//Color of handwriting
c.lineWidth=5;//The thickness of handwriting
$("#color").change(function(){//When the color of the writing changes
if(eraseFlag==true)//It's in the skin condition
$("#erase").trigger("click");//Automatically triggers the eraser click event to return to the brush state
c.strokeStyle=$(this).val();//Set the brush state


$("#fontSize").change(function(){//The brush thickness changes
if(eraseFlag==true)// Same as above  

$(".eraseSeries").click(function(){//The size of the rubber changes
var size=$('input[name="eraseSize"]:checked').val();//Gets the selected value of the rubber radio button group
sizeE=size;//To pass this value to the global variable, sizeE needs to be used to control the eraser position
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//Eraser size changes

$("#erase").toggle(function(){//Click the rubber button to flip the event;//Keep the state you set up last time

$("#erase").text(" The brush ");//Change the text on the button
$(".eraseSeries").show('fast');//Rubber radio group appears
// $("#eraseImg").show(); 

$("#erase").text(" rubber "); 
c.restore();//Restore the state of last brush (including color, thickness, etc.)



var p_x;//Last mouse position
var p_y; 
var p_x_now;//Current instant mouse position
var p_y_now; 
var eraseFlag=false; 
var sizeE;//Size of the rubber

$(document).mousedown(function(e){//Mouse down triggers events

// alert(sizeE); 
p_x= e.clientX;// Gets the position and sets it to Last mouse position
p_y= e.clientY; 
painting = true;//Brush start flag

$(document).mousemove(function(e){//Mouse movement triggers events
if(eraseFlag==true&& e.clientY>30)//The eraser is active, and the Y position of the mouse is greater than 30, that is, the mouse is in the drawing board

//The rubber image follows the mouse
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast'); 
if(painting==true)//The brush is active
p_x_now= e.clientX;//The current instant of the mouse position
p_y_now= e.clientY; 
c.beginPath();//Start path
//Curves are made up of very small segments of straight lines, which the computer can compute very quickly. This is a way to draw curves iteratively with straight lines
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//Move to the starting point
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//Draw a straight line from the beginning to the end

c.closePath();//Closed path, this is important, if the path is not closed,
//Then as long as the canvas color changes, all colors previously drawn will change
p_x = p_x_now;//After one iteration, the current instantaneous coordinate value is assigned to the last mouse coordinate value
p_y = p_y_now; 


$(document).mouseup(function(e){//Mouse release triggers events

painting=false;//Freeze the brush

<div > 
<select id="color" > <!-- The brush color --> 
<option class="opt" value="red"> red </option> 
<option class="opt" value="yellow"> yellow </option> 
<option class="opt" value="blue"> blue </option> 
<option class="opt" value="black" selected> black </option> 
<option class="opt" value="green"> green </option> 

<select id="fontSize"> <!-- Brush size --> 
<option value=5 selected>5</option> 
<option value=10>10</option> 
<option value=15>15</option> 
<option value=20>20</option> 
<option value=30>30</option> 
<button id="erase"> Clean skin </button> <!-- Rubber button --> 
<div class="eraseSeries"> <!-- Size of the rubber --> 
<input type="radio" name="eraseSize" value="5" checked/>5 
<input type="radio" name="eraseSize" value="10"/>10 
<input type="radio" name="eraseSize" value="15"/> 15 
<input type="radio" name="eraseSize" value="20"/> 20 
<input type="radio" name="eraseSize" value="30"/>30 

<!--<button id="btn">btn</button>--> 
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!-- The entire canvas --> 

<div id="eraseImg"> <!-- Rubber shape --> 


Related articles: