Comments: HTML5 canvas draws a picture and saves it as an image. The jcanvas plug-in is used. For more information, see the following example.
The Code is as follows:
<Head>
<Script src = 'jquery-1.9.1.js'> </script>
<Script src = 'jcanvas. min. js'> </script>
<! -- <Script src = 'js/jquery. mobile-1.2.0.min.js '> </script> -->
<Script>
Var maxX =-1;
Var maxY =-1;
Var minX = 99999;
Var minY = 99999;
Function checkData (event ){
Var x = event. pageX-$ ('canvas '). offset (). left;
Var y = event. pageY-$ ('canvas '). offset (). top;
If (x> maxX ){
MaxX = x;
} Else if (x <minX ){
MinX = x;
}
If (y> maxY ){
MaxY = y;
} Else if (y <minY ){
MinY = y;
}
}
$ (Function (){
Var obj = $ ('canvas ');
Var temp_e;
Var temp_draw = false;
Obj. on ({
Mousedown: function (e ){
Temp_e = e;
Temp_draw = true;
CheckData (e );
},
Mousemove: function (e ){
If (temp_draw ){
Obj. drawLine ({
StrokeStyle: '#000 ',
StrokeWidth: 3,
X1: temp_e.pageX-$ ('canvas '). offset (). left, y1: temp_e.pageY-$ ('canvas'). offset (). top,
X2: e. pageX-$ ('canvas '). offset (). left, y2: e. pageY-$ ('canvas'). offset (). top,
});
}
Temp_e = e;
CheckData (e );
},
Mouseup: function (e ){
Temp_e = null;
Temp_draw = false;
CheckData (e );
},
Mouseout: function (){
Temp_e = null;
Temp_draw = false;
}
});
$ ("# Clean"). on ("click", function (){
MaxX =-1;
MaxY =-1;
MinX = 99999;
MinY = 99999;
Obj. clearCanvas ();
});
$ ("# Save"). on ("click", function (){
Var image = obj. getCanvasImage ("png ");
Alert (image );
});
});
</Script>
</Head>
<Body>
<Input type = "button" id = "save" value = "save"/>
<Input type = "button" id = "clean" value = "clear"/>
<Br/>
<Canvas width = '000000' height = '000000' style = "background: # f00"> </canvas>
<Div id = "points"> </div>
</Body>
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
