Home > Developer > Web Develop
1. What is canvas?
You can draw a label for a graphic. Generally used JavaScript to draw.
2. Create a canvas
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title></title>5 </Head>6 <Body>7 <CanvasID= "MyCanvas"width= "+"Height= "+"></Canvas>//Create canvas with canvas label8 </Body>9 </HTML>
3. Draw on the canvas.
1 <Scripttype= "Text/javascript">2 //use JavaScript to draw images3 //get to the canvas element4 varcan=document.getElementById ("MyCanvas");5 //Create HTML5 built-in objects with a variety of drawing paths, rectangles, circles, characters, and methods for adding images. 6 varDraw=Can.getcontext ("2d");7 //FillStyle (); can be a CSS color, gradient, pattern8 Draw.fillstyle="Red";9 //FillRect (x,y,width,height) defines the Fill methodTen Draw.fillrect (0,0, the, A); A </Script>
4.canvas-Path
1 varCan=document.getelementbyid ("MyCanvas");2 varDraw=can.getcontext ("2d");3 //Start a path4 Draw.beginpath ();5 //set the thickness of a line6Draw.linewidth= "5";7 //set the color of a line8Draw.strokestyle= "Green";9 //beginning of the lineTenDraw.moveto (0,75); One //the end of the line ADraw.lineto (250,75); - //Start Drawing Paths - Draw.stroke (); the //Start another path - Draw.beginpath (); - //set the thickness of a line -Draw.linewidth= "5"; +Draw.strokestyle= "Purple"; -Draw.moveto (25,05); +Draw.lineto (35,25); ADraw.stroke ();
Effect:
HTML5 Study notes: 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
