Comments: It is implemented by using the canvas of html5. In the canvas, we can draw circles, rectangles, and custom lines. This time, we mainly use circle and line. Html supports response to touch events
The first thing to note is that it is not to draw with a mouse, but to touch a device with a finger, such as an ipad.
The canvas of html5. In the canvas, we can draw circles, rectangles, and custom lines. This time, we mainly use circle and line. Html supports the response to touch events.
OnTouchStart touch start
OnTouchMove touch slide
OnTouchEnd touch ends
With these events, it is easy to draw images with your fingers in the browser.
Effects on IPAD:
Ideas:When the finger touches the screen, a circle is added to the position of the finger in the onTouchStart event. When the finger starts to slide, the onTouchMove continuously draws lines from the last touch point to the next point.
HTML:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </p> <Head>
<Title> Canvas </title>
<Meta name = "viewport" content = "width = device-width, user-scalable = no">
</Head>
<Body>
<Canvas id = "canvas"> </canvas>
<Script type = "text/javascript" src = "canvasScript. js" charset = "UTF-8"> </script>
</Body>
</Html>
JS:
The Code is as follows:
// Get canvas
Var canvas = document. getElementById ("canvas ");
// Full screen
Canvas. width = window. innerWidth;
Canvas. height = window. innerHeight;
// Whether touch is supported
Var touchable = 'createtouch' in document;
If (touchable ){
Canvas. addEventListener ('touchstart', onTouchStart, false );
Canvas. addEventListener ('touchmove ', onTouchMove, false );
}
Else
{
Alert ("touchable is false! ");
}
// Last touch Coordinate
Var lastX;
Var lastY; </p> <p> var ctx = canvas. getContext ("2d ");
Ctx. lineWidth = 10; // brush width
Ctx. strokeStyle = "# FF0000"; // paint brush color </p> <p> // touch start event
Function onTouchStart (event ){
Event. preventDefault ();
LastX = event. touches [0]. clientX;
LastY = event. touches [0]. clientY;
DrawRound (lastX, lastY); </p> <p>}
// Touch the slide event
Function onTouchMove (event ){
Try
{
Event. preventDefault ();
DrawLine (lastX, lastY, event. touches [0]. clientX, event. touches [0]. clientY );
LastX = event. touches [0]. clientX;
LastY = event. touches [0]. clientY;
}
Catch (err ){
Alert (err. description );
} </P> <p >}</p> <p> // circle
Function drawRound (x, y)
{
Ctx. fillStyle = "# FF0000 ";
Ctx. beginPath ();
Ctx. arc (x, y, 5, 0, Math. PI * 2, true );
Ctx. closePath ();
Ctx. fill ();
}
// Draw a line
Function drawLine (startX, startY, endX, endY)
{
Ctx. beginPath ();
Ctx. lineCap = "round ";
Ctx. moveTo (startX, startY );
Ctx. lineTo (endX, endY );
Ctx. stroke ();
}
Key points:
Ctx. lineCap = "round"; set the style cap that ends with the line to a circle. This is critical. Otherwise, a broken band may occur when the angle of the online bar changes significantly.
Event. preventDefault (); cancels the default action of the event. You must call this method in a sliding event. Otherwise, sliding will trigger the default sliding event of the browser, and the page drop-down effect will occur, and you will not be able to draw any picture.
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
