Home > Developer > JavaScript
See the figure below:
The Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Meta http-equiv = "content-type" Content = "text/html; charset = UTF-8">
<Head>
<Title> simple canvas </title>
<Style>
# EraseImg {/* rubber style *//**/
Border: solid;
Color: gray;
Border-radius: 118px;
Width: 5px;
Height: 5px;
Position: absolute;
Display: none;
}
. EraseSeries {/* sort the rubber size single-choice button groups. This div not only excludes one line */
Display: inline-block;
}
</Style>
<Script src = "jquery-1.7.1.js"> </script>
<Script>
Var c; // The obtained 2d canvas
Var painting = false; // determines whether the painting is in progress, that is, whether the left mouse button is pressed for a long time.
Var canvas; // canvas
$ (Function (){
$ (". EraseSeries"). hide (); // hide an initial state radio button group
Canvas = document. getElementById ("myCanvas ");
C = canvas. getContext ("2d ");
C. lineCap = "round"; // set the handwriting corner. Otherwise, the handwriting will be faulty.
C. strokeStyle = "black"; // handwriting color
C. lineWidth = 5; // The width of the handwriting.
$ ("# Color"). change (function () {// when the handwriting color changes
If (eraseFlag = true) // The object is in the skin shining state.
{
$ ("# Erase"). trigger ("click"); // automatically triggers the click Event of the rubber to return to the paint brush status.
}
C. strokeStyle = $ (this). val (); // you can specify the paint brush status.
C. lineWidth = $ (this). val ();
});
$ ("# FontSize"). change (function () {// The paint width is changed.
If (eraseFlag = true) // same as above
{
$ ("# Erase"). trigger ("click ");
}
C. lineWidth = $ (this). val ();
C. strokeStyle = $ ("# color"). val ();
// EraseFlag = false;
});
$ (". EraseSeries"). click (function () {// The rubber size changes
Var size = $ ('input [name = "eraseSize"]: checked'). val (); // obtain the selected value of the rubber radio button group.
SizeE = size; // transmits the value to the global variable. sizeE must be used to control the position of the rubber style.
C. lineWidth = size;
$ ("# EraseImg" ).css ({"width": size + "px", "height": size + "px"}); // The rubber style size changes
});
$ ("# Erase"). toggle (function () {// click the rubber button to flip the event
C. save (); // keep the status set last time
EraseFlag = true;
C. strokeStyle = "white ";
$ ("# Erase"). text ("paint brush"); // change the text on the button
$ (". EraseSeries"). show ('fast '); // The eraser radio group appears.
// $ ("# EraseImg"). show ();
SizeE = 5;
}, Function (){
EraseFlag = false;
$ ("# Erase"). text ("rubber ");
$ (". EraseSeries"). hide ('fast ');
C. restore (); // restore the last paint brush (including color and width)
});
// SetInterval (paint, 2 );
});
Var p_x; // The Last mouse position
Var p_y;
Var p_x_now; // The current instantaneous mouse position
Var p_y_now;
Var eraseFlag = false;
Var sizeE; // rubber size
$ (Document). mousedown (function (e) {// trigger an event by pressing the mouse
// Alert (sizeE );
P_x = e. clientX; // obtain the position and set it to the last mouse position.
P_y = e. clientY;
Painting = true; // specifies the paint brush startup flag.
});
$ (Document). mousemove (function (e) {// trigger event with mouse movement
If (eraseFlag = true & e. clientY> 30) // The eraser is in the active state, and the position of the mouse Y is greater than 30, that is, the mouse is inside the canvas.
{
// 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 paint is activated.
{
// Alert (1 );
P_x_now = e. clientX; // The current mouse position
P_y_now = e. clientY;
C. beginPath (); // start path
// The curve is composed of a very small straight line in the segment, and the computation speed of the computer is very fast. This is a method of drawing a curve through linear iteration.
C. moveTo (p_x-5-canvas.offsetLeft, p_y-5-canvas.offsetTop); // move to start point
C. lineTo (p_x_now-5-canvas.offsetLeft, p_y_now-5-canvas.offsetTop); // draw a straight line from the start point to the end point
C. stroke ();
C. closePath (); // closed path. This is very important. If the path is not closed,
// As long as the canvas color changes, all the previously painted colors change.
P_x = p_x_now; // after an iteration, the current instantaneous coordinate value is assigned to the coordinate value of the previous mouse.
P_y = p_y_now;
}
});
$ (Document). mouseup (function (e) {// trigger event when the mouse is released
Painting = false; // freeze the paint brush
});
</Script>
</Head>
<Body>
<Div>
<Select id = "color"> <! -- Paint 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"> <! -- Paint 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"> skin </button> <! -- Rubber button -->
<Div class = "eraseSeries"> <! -- Rubber size -->
<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> <! -- Entire canvas -->
<Div id = "eraseImg"> <! -- Rubber shape -->
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
