Canvas related knowledge in html5 (1) concepts and definitions, html5canvas

Canvas related knowledge in html5 (1) concepts and definitions, html5canvas
What is Canvas?

HTML5 canvas elements use JavaScript to draw images on webpages.

A canvas is a rectangular area that allows you to control each pixel.

Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.

<Canvas> A label is only a graphical container and does not have its own behavior. You need to define an API to support script-based client plotting.

Create a Canvas Element

The canvas code is very simple. It defines an ID and its width and height. It must be emphasized that the width and height of the canvas must be written on the element. If the style is defined, the ratio of the canvas image cannot be changed.

<Canvas id = "myCanvas" width = "200" height = "100"> </canvas>

How to Use <canvas> to mark a drawing

Most Canvas drawing APIs are not defined on the <canvas> element, but on the getContext () method of the Canvas.Drawing EnvironmentObject.

This is obtained through the getContext () method of the Canvas object and passing the string "2d" as a unique parameter to it.

<Script type = "text/javascript"> var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); cxt. fillStyle = "# FF0000"; cxt. fillRect (,); </script>

Tip: in the future, if the <canvas> label is extended to support 3D drawing, the getContext () method may allow passing a "3d" string parameter.