Html5 +javascript to make simple sketchpad attached

2020-03-30 02:45:26
OfStack
As shown in figure:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404251502051.gif? 201432515258 ">

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

<title> Simple drawing board </title> 

<style> 
#eraseImg{ /**/ 
border:solid; 
color:gray; 
border-radius: 118px; 
width: 5px; 
height: 5px; 
position: absolute; 
display: none; 

} 
.eraseSeries{  
display: inline-block; 
} 

</style> 
<script src="jquery-1.7.1.js"></script> 
<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  
$(function(){ 

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

canvas=document.getElementById("myCanvas"); 
c=canvas.getContext("2d"); 
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
c.lineWidth=$(this).val(); 

}); 

$("#fontSize").change(function(){//The brush thickness changes
if(eraseFlag==true)// Same as above  
{ 
$("#erase").trigger("click"); 
} 
c.lineWidth=$(this).val(); 
c.strokeStyle=$("#color").val(); 
//eraseFlag=false; 
}); 

$(".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
c.lineWidth=size; 
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//Eraser size changes
}); 

$("#erase").toggle(function(){//Click the rubber button to flip the event
c.save();//Keep the state you set up last time
eraseFlag=true; 
c.strokeStyle="white"; 

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


},function(){ 
eraseFlag=false; 
$("#erase").text(" rubber "); 
$(".eraseSeries").hide('fast'); 
c.restore();//Restore the state of last brush (including color, thickness, etc.)
}); 


//setInterval(paint,2); 

}); 

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'); 
} 
else 
{ 
$("#eraseImg").hide('fast'); 
} 
if(painting==true)//The brush is active
{ 
//alert(1); 
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.stroke(); 
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
}); 

</script> 
</head> 
<body> 
<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> 

<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> 
</select> 
<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 
</div> 
</div> 

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

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

</body> 
</html>