html5 javascript to create simple drawing board with pictures_javascript skills

See the picture:



The code is as follows:

Copy the code The code is as follows:

> ;
<script> <br><br>var c;//The obtained 2d drawing board<BR>var painting = false;//Determine whether painting is in progress, that is, whether the left mouse button is long pressed<BR> var canvas;//Artboard<BR>$(function(){ <br><br>$(".eraseSeries").hide();//Initial state radio button group is hidden<br><br>canvas= document.getElementById("myCanvas"); <BR>c=canvas.getContext("2d"); <BR>c.lineCap="round";//Set the corners of the handwriting, otherwise the handwriting will be broken<BR>c .strokeStyle="black";//The color of the handwriting<BR>c.lineWidth=5;//The thickness of the handwriting<BR>$("#color").change(function(){//When the color of the handwriting changes <BR>if(eraseFlag==true)//In the erase state<BR>{ <BR>$("#erase").trigger("click");//Automatically trigger the eraser's click event to return To the brush state<BR>} <BR>c.strokeStyle=$(this).val();//Set the brush state<BR>c.lineWidth=$(this).val(); <br><br> }); <br><br>$("#fontSize").change(function(){//The brush thickness changes<BR>if(eraseFlag==true)//Same as above<BR>{ <BR>$ ("#erase").trigger("click"); <BR>} <BR>c.lineWidth=$(this).val(); <BR>c.strokeStyle=$("#color").val (); <BR>//eraseFlag=false; <BR>}); <br><br>$(".eraseSeries").click(function(){//The eraser size changes<BR>var size= $('input[name="eraseSize"]:checked').val();//Get the selected value of the eraser radio button group<BR>sizeE=size;//Transfer the value to the global variable, sizeE needs to be used to control the position of the eraser style <BR>c.lineWidth=size; <BR>$("#eraseImg").css({"width" :size "px","height":size "px"} );//The size of the eraser style changes<BR>}); <br><br>$("#erase").toggle(function(){//The click flip event of the rubber button<BR>c.save( );//Keep the last set state <BR>eraseFlag=true; <BR>c.strokeStyle="white"; <br><br>$("#erase").text("Brush");/ /Change the text on the button<BR>$(".eraseSeries").show('fast');//Eraser radio group appears<BR>// $("#eraseImg").show(); <BR>sizeE=5; <br><br><BR>},function(){ <BR>eraseFlag=false; <BR>$("#erase").text("Eraser"); <BR>$( ".eraseSeries").hide('fast'); <BR>c.restore();//Restore the last brush state (including color, thickness, etc.) <BR>}); <br><br><BR>//setInterval(paint,2); <br><br>}); <br><br>var p_x;//Last mouse position<BR>var p_y; <BR>var p_x_now;//Current Momentary mouse position<BR>var p_y_now; <BR>var eraseFlag=false; <BR>var sizeE;//Eraser size<br><br>$(document).mousedown(function(e){//Mouse pressed Trigger event<br><br><BR>// alert(sizeE); <BR>p_x= e.clientX;//Get the position and set it as the last mouse position<BR>p_y= e.clientY; <BR>painting = true;//Brush start flag<br><br>}); <BR>$(document).mousemove(function(e){//Mouse movement trigger event<BR>if(eraseFlag==true&& e .clientY>30)//The eraser is active, and the position of the mouse Y is greater than 30, that is, the mouse is in the drawing board<BR>{ <br><br>//The eraser image moves with the mouse<BR>$( "#eraseImg").animate({left: e.clientX-sizeE "px",top: e.clientY-sizeE "px"},0).show('fast'); <BR>} <BR>else <BR>{ <BR>$("#eraseImg").hide('fast'); <BR>} <BR>if(painting==true)//The brush is active <BR>{ <BR>/ /alert(1); <BR>p_x_now= e.clientX;//The mouse position at the current moment<BR>p_y_now= e.clientY; <BR>c.beginPath();//Start path<BR>//Curve It is composed of very small straight lines, and the computer operation speed is very fast. This is a way of iteratively drawing curves with straight lines<BR>c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop) ;//Move to the starting point<BR>c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//Draw a straight line from the starting point to the end point<br><br>c.stroke( ); <BR>c.closePath();//Closed path, this is very important. If the path is not closed, <BR>// then as long as the canvas color changes, all previously painted colors will change <BR> p_x = p_x_now;//After one iteration, the current instant coordinate value is assigned to the last mouse coordinate value <BR>p_y = p_y_now; <BR>} <br><br>}); <br><br>$( document).mouseup(function(e){//Mouse release trigger event<br><br>painting=false;//Freeze brush<BR>}); <br><br></script>

红色
黄色
蓝色
黑色
绿色



5
10
15
20
30

擦皮

5
10
15
20
30