Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use the canvas element of H5", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the canvas element of H5.

The canvas element is a newly added element in HTML5, which is a bright spot in HTML5. The Canvas element is like a canvas, and you can draw a variety of graphics and images as well as animation effects through its own API combined with JavaScript code.

Canvas element browser incompatibility problem

Canvas is only supported above ie9, and other chrome, firefox, Apple browser, etc.

As long as browsers are compatible with canvas, most api will be supported (except for some of the latest api)

The compatibility of the mobile terminal is very ideal, and it is basically used casually.

2d support is very good, 3D (webgl) ie11 supports it, and all others support it.

If the browser is not compatible, it is best to give a friendly prompt, which is displayed only if the browser does not support it.

/ / for example:

Your browser does not support canvas, please upgrade your browser

Browsers are not compatible and can be gracefully downgraded by means such as flash.

Create a canvas using the Canvas element

To create a canvas element in a page, just like any other element, you only need to add a

Note:

You cannot use the CSS style to control the width and height of the canvas element, otherwise it will cause the drawing to stretch.

Resetting the width and height attribute of the canvas tag will cause the canvas to erase everything.

You can set the background color for the canvas canvas

1.3canvas coordinate system

Before we start drawing any images, let's talk about the coordinate system of canvas. The canvas coordinate system takes the upper left corner 0B0 as the origin, the horizontal direction is the x axis, and the right direction is positive; the vertical direction is the y axis, and the downward direction is positive.

Draw line diameter

Get context object (CanvasRenderingContext2D)

First, get the canvas element, and then call the element's getContext ("2d") method, which returns a CanvasRenderingContext2D object that you can use to draw on the canvas.

Varmcanvas=document.getElementById ("mcanvas")

Varmcontext=mcanvas.getContext ("2d")

Set the start point for drawing (moveTo)

/ / Syntax:

Ctx.moveTo (XBI y)

* explanation: sets the starting point of the context drawing path. It is equivalent to moving the brush to a certain position.

* parameters: XQuery y is relative to the origin of the canvas coordinate system (upper left corner).

* Note: the starting point must be set before drawing line segments, otherwise the drawing is invalid. If it is not set, the coordinates of lineTo will be used as moveTo

At this point, I believe you have a deeper understanding of "how to use the canvas element of H5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.