Home > Developer > Web Develop
The overall steps of canvas drawing:
1. Create HTML page, set canvas label
2. Write JS to get the canvas DOM object
3. Get context through the canvas tag DOM object
4. Set drawing line style, color
5. Draw a graphic, or fill a graphic
Browser support:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canvas> and its properties and methods.
Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.
Detection of browser support
<p id= "Support" ></p>
<script type= "Text/javascript" >
Try
{
Document.createelement ("Canvas"). GetContext ("2d");
document.getElementById ("Support"). InnerHTML = "OK";
}
catch (E)
{
document.getElementById ("Support"). InnerHTML = E.message;
}
</script>
To draw a rectangle:
<body>
<canvas id= "Diagonal" style= "border:1px solid blue;" Width= "height="
<!---The following shows a drawing rectangle >
<script type= "Text/javascript" >
First step: Get the canvas element
var canvasdom = document.getElementById ("diagonal");
Step Two: Get context
var context = Canvasdom.getcontext (' 2d ');
Step three: Specify drawing line Style, color
Context.strokestyle = "Red";
Fourth step: Draw the rectangle, only the line. The content is empty
Context.strokerect (10, 10, 190, 100);
The following shows the fill rectangle.
Context.fillstyle = "Blue";
Context.fillrect (110,110,100,100);
</script>
</body>
To insert a picture in a canvas:
Loading pictures
var bark = new Image ();
BARK.SRC = "Bark.jpg";
After the picture is loaded, call the drawing function again
Bark.onload = function () {
Drawtrails ();
}
Canvas background Image:
Loading pictures
var gravel = new Image ();
GRAVEL.SRC = "Gravel.jpg";
Gravel.onload = function () {
Drawtrails ();
}
Replace thick lines with a background map
Context.strokestyle = Context.createpattern (gravel, ' repeat ');
Context.linewidth = 20;
Context.stroke ();
Diagonal:
Get the canvas element and its drawing context var canvas = document.getElementById ("diagonal");
var context = Canvas.getcontext ("2d");
Create a path with absolute coordinates
Context.beginpath ();
Context.moveto (70, 140);
Context.lineto (140, 70);
Draw this line onto the canvas
Context.stroke ();
Transform:
Get the canvas element and its drawing context
var canvas = document.getElementById ("diagonal");
var context = Canvas.getcontext ("2d");
Save current drawing State
Context.save ();
Move the drawing context lower right
Context.translate (70, 140);
Draw the same line from the previous point as the origin
Context.beginpath ();
Context.moveto (0, 0);
Context.lineto (70,-70);
Context.stroke ();
Context.restore ();
Canvas draws circles and arcs:
<canvas id= "Can" width= "height=" ></canvas>
<script type= "Text/javascript" >
var can = document.getElementById ("can");
var ctx = Can.getcontext ("2d");
Ctx.beginpath ();
Ctx.arc (75,75,50,0,math.pi*2,true); Outer ring
Ctx.moveto (110,75);
Ctx.arc (75,75,35,0,math.pi,false); Mouth, Half Circle
Ctx.moveto (65,65);
Ctx.arc (60,65,5,0,math.pi*2,true); Left eye
Ctx.moveto (95,65);
Ctx.arc (90,65,5,0,math.pi*2,true); Right eye
Ctx.stroke ();//Use Ctx.fill (); Fill color;
</script>
HTML 5 Canvas
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
