Comments: Html5 simple canvas for code sharing. For more information, see.
HTML5 simple canvas
The Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Title> </title>
<Meta charset = "UTF-8">
<Script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script </a>
</Head>
<Style>
Canvas {border: 2px solid #000 ;}
</Style>
<Body>
<Canvas id = "draw" width = "500" height = "500"> </canvas>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var canvas = document. getElementById ("draw ");
Var draw = canvas. getContext ("2d ");
Draw. lineWidth = 5; // line width
Draw. strokeStyle = "red"; // color
Var godraw = false;
// Press the mouse
$ ("# Draw"). mousedown (function (e ){
// Exact coordinates
Var mouseX = e. pageX-this.offsetLeft;
Var mouseY = e. pageY-this.offsetTop;
Draw. moveTo (mouseX, mouseY );
Godraw = true; </p> <p> })
// Open the mouse
$ ("# Draw"). mouseup (function (e ){
Godraw = false;
})
// Move the mouse
$ ("# Draw"). mousemove (function (e ){
If (godraw ){
Var mouseX = e. pageX-this.offsetLeft;
Var mouseY = e. pageY-this.offsetTop;
Draw. lineTo (mouseX + 4, mouseY + 4 );
Draw. stroke ();
} </P> <p> })
})
</Script>
</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
