HTML5 Canvas The canvas> tag defines graphics, such as charts and other images, and you must use scripts to draw graphics. Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas. ##What is Canvas?HTML5 element is used for drawing graphics through scripts (usually JavaScript) to complete. tags are just graphics containers, you have to use a script to draw the graphics. You can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways. Browser supportInternet Explorer 9+, Firefox, Opera, Chrome, and Safari support the element.Note: Internet Explorer 8 and earlier IE This version of the browser does not support the element.Create a canvas (Canvas)A canvas is a rectangular box in a web page, drawn through the element.Note: By default, the element has no borders and content. A simple example is as follows:Copy after loginNote: Tags usually need to specify an id attribute (often referenced in scripts), and the width and height attributes define the size of the canvas. Tip: You can use multiple elements in an HTML page. Use the style attribute to add borders: ExampleCopy after loginUse JavaScript to Drawing imagesThe canvas element itself does not have drawing capabilities. All drawing work must be done inside JavaScript: Example var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); Copy after loginExample analysis:First, find the element:var c=document.getElementById("myCanvas");Copy after loginThen , create context Object: var ctx=c.getContext("2d");Copy after logingetContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters and adding images. The following two lines of code draw a red rectangle: ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);Copy after login Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black). fillRect(x,y,width,height) method defines the current filling method of the rectangle. Canvas coordinatescanvas is a two-dimensional grid. The coordinates of the upper left corner of the canvas are (0,0)The fillRect method above has parameters (0,0,150,75). Means: Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0). 【Related Recommendations】1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download 2. Free h5 online video tutorial##3. php.cn original html5 video tutorial