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:

Simple drawing board

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

} .eraseSeries{ /*Arrangement of rubber-sized radio button groups, this div does not occupy a separate line*/ display: inline-block; }

var c;//The obtained 2d drawing board var painting = false;//Determine whether painting is in progress, that is, whether the left mouse button is long pressed var canvas;//Artboard $(function(){

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

canvas= document.getElementById("myCanvas"); c=canvas.getContext("2d"); c.lineCap="round";//Set the corners of the handwriting, otherwise the handwriting will be broken c .strokeStyle="black";//The color of the handwriting c.lineWidth=5;//The thickness of the handwriting $("#color").change(function(){//When the color of the handwriting changes if(eraseFlag==true)//In the erase state { $("#erase").trigger("click");//Automatically trigger the eraser's 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 eraser size changes var size= $('input[name="eraseSize"]:checked').val();//Get the selected value of the eraser radio button group sizeE=size;//Transfer the value to the global variable, sizeE needs to be used to control the position of the eraser style c.lineWidth=size; $("#eraseImg").css({"width" :size "px","height":size "px"} );//The size of the eraser style changes });

$("#erase").toggle(function(){//The click flip event of the rubber button c.save( );//Keep the last set state eraseFlag=true; c.strokeStyle="white";

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

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

//setInterval(paint,2);

});

var p_x;//Last mouse position var p_y; var p_x_now;//Current Momentary mouse position var p_y_now; var eraseFlag=false; var sizeE;//Eraser size

$(document).mousedown(function(e){//Mouse pressed Trigger event

// alert(sizeE); p_x= e.clientX;//Get the position and set it as the last mouse position p_y= e.clientY; painting = true;//Brush start flag

}); $(document).mousemove(function(e){//Mouse movement trigger event 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 {

//The eraser image moves with 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 mouse position at the current moment p_y_now= e.clientY; c.beginPath();//Start path //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 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 starting point to the end point

c.stroke( ); c.closePath();//Closed path, this is very important. If the path is not closed, // then as long as the canvas color changes, all previously painted colors will change p_x = p_x_now;//After one iteration, the current instant coordinate value is assigned to the last mouse coordinate value p_y = p_y_now; }

});

$( document).mouseup(function(e){//Mouse release trigger event

painting=false;//Freeze brush });

红色 黄色 蓝色 黑色 绿色

5 10 15 20 30 擦皮 5 10 15 20 30

btn -->