Draw on canvas in html5 and html5canvas

Draw on canvas in html5 and html5canvas

Canvas is controlled by JavaScript, and its size must be determined during painting. You cannot control or change the size of the canvas element.

// Html code <canvas id = "my_canvas" width = "150" height = "150"> fallback content here </canvas> // js Code // check whether the browser uses JavaScript supports the canvas Element var canvas = document. getElement ('My _ canvas '); // obtain the canvas using the id attribute first. Check that the browser supports the getContext method of canvas if (canvas. getContext) {// 2d indicates that a style is created, and the coordinate origin var context = canvas is in the upper left corner. getContext ("2d"); // set the image color to Red canvas. fillStyle = "rgb (, 0, 0)"; // you can specify the start coordinate X \ Y, length, and width of the image. The following figure shows the starting point) a canvas with a length and width of 100. fillRect (100,100,); // Add text context to the canvas. font = 'italic 40px sans-serif'; context. textBaseline = 'top'; context. fillText ('awesomeco ', 60, 0); // draw the line context in the canvas. lineWidth = 2; context. beginPath (); // draw the context of four vertices. moveTo (0, 40); context. lineTo (30,0); context. lineTo (60, 40); context. lineTo (285, 40); // you can use the stroke method to draw a line to context. stroke (); context. closePath (); // move the source point of the canvas // use the save () method to retain the source point before moving the source point, the restore origin is stored in the stack structure. // you can restore the restore origin to the top of the stack through restore. save (); // move to the new origin and draw a square context. translate (20, 20); context. fillRect (0, 0, 20, 20); // draw a triangle // color the context with the paint brush first. fillStyle = '# fff'; // note that rgb (a, B, c) can be used to color the paint brush) you can also use the '# abc' style // strokeStyle to set the color context of the image outline. strokeStyle = '# fff'; context. lineWidth = 2; context. beginPath (); context. moveTo (0, 20); context. lineTo (10, 0); context. lineTo (20, 20); context. lineTo (0, 20); context. fill (); context. closePath (); context. restore ();} else {// If the browser does not support canvas, the app will display the text content that replaces canvas}

Knowledge Point expansion:

Comparison of the differences between stroke, fill, strokeStyle and fillStyle

Stroke: line, shape, outline

Fill: inside a closed Image

Use stroke and fill

context.lineWidth=;

context.beginPath()

/**/

/**/

context.closePath();

The/**/content in the stroke is

context.strokeSytle=;

context.stroke();

Draw lines for the content

The/**/content in fill is

context.fillStyle=;

context.fill();

When the picture is closed, the paint brush is automatically colored and all images are displayed.

These two methods may also be used at the same time.

Since earlier versions of IE9 were not compatible with canvas elements, Google released a library named assumercanvas, which opened almost all Canvas APIs for IE users.

We only need to introduce js for use.

<!--[if lte IE 8]>

<script type=”text/javascript” 

        charset=”utf-8”

        src=”js/excanvas.js”>

</script>