What is Canvas?
HTML5 <canvas> elements are used to draw graphics, and are accomplished through scripts (usually JavaScript).
<canvas> tag is just a graphics container, you must use a script to draw the graphic.
You can use Canva to draw paths, boxes, circles, characters, and add images in a variety of ways.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support <canvas> elements.
Note: Internet Explorer 8 and earlier IE versions of browsers do not support <canvas> elements.
Create a canvas (Canvas)
A canvas is a rectangular box in a Web page that is drawn by canvas> elements.
Note: The <canvas> element does not have borders and content by default.
<canvas> simple examples are as follows:
<canvas id= "MyCanvas" width= "height=" ></canvas>
Note: Tags usually need to specify an id attribute (often referenced in the script), the size of the canvas defined by the width and height attributes.
Tip: You can use multiple <canvas> elements in an HTML page.
Use the Style property to add a border:
instance
<canvas id= "MyCanvas" width= "100" height= "
Style= "border:1px solid #000000;" >
</canvas>
using JavaScript to draw images
The canvas element itself is not capable of drawing. All the drawing work must be done within JavaScript:
Instance
<script>
var C=document.getelementbyid ("MyCanvas");
var Ctx=c.getcontext ("2d");
Ctx.fillstyle= "#FF0000";
Ctx.fillrect (0,0,150,75);
</script>
Instance resolution:
First, find the <canvas> elements:
var C=document.getelementbyid ("MyCanvas");
Then, create the context object:
var Ctx=c.getcontext ("2d");
The GetContext ("2d") object is a built-in HTML5 object that has several ways to draw paths, rectangles, circles, characters, and add images.
The following two lines of code draw a red rectangle:
Ctx.fillstyle= "#FF0000";
Ctx.fillrect (0,0,150,75);
Setting the FillStyle property can be a CSS color, gradient, or pattern. The default setting for FillStyle is #000000 (black).
The FillRect (X,y,width,height) method defines how the rectangle is currently filled.
Example:
| The code is as follows | Copy Code |
<!doctype html> <meta charset= "Utf-8"/> <meta name= "keywords" content= "script boy _ Beckham _html5_canvas"/> <meta name= "description" content= "Script boy _ Beckham _html5_canvas"/> <meta name= "" content= "script Kid Beckham xiaobei qq:2801616735"/> <title>HTML5_canvas</title> <style> p{ border:1px dashed red; padding:5px; } canvas{ BORDER:1PX solid yellow; } </style> <body> <ul style= "List-style:none" > <li>1, creating canvas</li> <li>2, creating rectangles </li> <li>3, creating lines </li> <li>4, creating text </li> <li>5, creating a circle </li> <li>6, creating Images </li> </ul> <p> <canvas id= "Canvas" > Pro, your browser does not support canvas. ^_^ </canvas> </p> <p> <canvas id= "CANVAS1" > Pro, your browser does not support canvas. ^_^ </canvas> <button onclick= "func (1);" > Create Rectangle </button> </p> <p> <canvas id= "CANVAS2" > Pro, your browser does not support canvas. ^_^ </canvas> <button onclick= "func (2);" > Create lines </button> </p> <p> <canvas id= "CANVAS3" > Pro, your browser does not support canvas. ^_^ </canvas> <button onclick= "func (3);" > Create Text </button> </p> <p> <canvas id= "Canvas4" > Pro, your browser does not support canvas. ^_^ </canvas> <button onclick= "func (4);" > Create Circle </button> </p> <p> <canvas id= "CANVAS5" > Pro, your browser does not support canvas. ^_^ </canvas> <button onclick= "func (5);" > Create Graphics </button> </p> </body> <script> function func (ID) { var c = document.getElementById (' canvas ' +id); var ctx = C.getcontext (' 2d '); Switch (ID) { Case 1: Ctx.fillstyle = "#FF0000"; Ctx.fillrect (10,10,100,50); Break Case 2: Ctx.beginpath (); Ctx.moveto (10,10); Ctx.lineto (100,100); Ctx.stroke (); Break Case 3: ctx.font= "20px Arial"; Ctx.filltext ("Script Boy _ Beckham _html5_canvas", 10,50); Break Case 4: Ctx.beginpath (); Ctx.arc (95,50,40,0,2*MATH.PI); Ctx.stroke (); Break Case 5: var Img=document.getelementbyid ("img"); C.width=img.width; C.height=img.height; Ctx.drawimage (img,10,10); Break } } </script> |
|
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
