Home > Developer > Web Develop
HTML5 Canvas canvas and html5 Canvas
Use html5 canvas elements to draw images on webpages using JavaScript.
Draw a circle by specifying the size, color, and position:
<!DOCTYPE htma>
Draw a line by specifying where to start and where to end<!DOCTYPE HTML>
Use the color you specified to draw the gradient background
<!DOCTYPE htma>Place an image on the canvas
<!DOCTYPE HTML>
For canvas clearance issues with HTML5Yes, it's strange... Why... But it can be opportunistic:
<Body>
<Canvas id = "bo" width = "500" height = "500" style = "border: 1px solid"> your browser does not support secondary applications, update the browser </canvas>
<Input type = "button" onclick = "clea ()" value = "clear"/>
<Script src = "code.jquery.com/jquery-1.6.3.min.js"> </script>
<Script>
Var canvasInit = function (){
Var canvas = document. getElementById ('bo ');
Var pic = canvas. getContext ("2d ");
Pic. lineWidth = 5;
Pic. strokeStyle = "red ";
Var con = false;
$ ("# Bo"). mousedown (function (e ){
Var mouseX = e. pageX-this. offsetLeft;
Var mouseY = e. pageY-this. offsetTop;
Con = true;
Pic. moveTo (mouseX, mouseY );
});
$ ("# Bo"). mouseup (function (e ){
Con = false;
})
$ ("# Bo"). mousemove (function (e ){
Var mouseX = e. pageX-this. offsetLeft;
Var mouseY = e. pageY-this. offsetTop;
If (con)
Pic. lineTo (mouseX, mouseY );
Pic. stroke ();
})
}
CanvasInit ();
Function clea (){
Var tmp = $ ('# Bo'). clone ();
$ ('# Bo'). remove ();
$ ('Body'). prepend (tmp );
CanvasInit ();
// Pic. clearRect (500,500 );
}
</Script>... the remaining full text>
You can draw existing images on the canvas of HTML5.Pure html5 cannot be done efficiently, but you can use PNG images to first fill all the black parts into transparent
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
