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

This article introduces the relevant knowledge of "how to use the canvas of the front-end HTLM". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The HTML5 tag is used to draw images (through scripts, usually JavaScript).

However, the element itself does not have the ability to draw (it is just a container for graphics)-you must use scripts to accomplish the actual drawing task.

The getContext () method returns an object that provides methods and properties for drawing on the canvas.

General way of writing:

(1) getContext ()

GetContext () is used to get the rendering context and its painting function. It has only one parameter, and currently only supports 2d, that is:

Var canvas = document.getElementById ('tutorial')

Var ctx = canvas.getContext ('2d')

GetContext () can be used to detect whether the current browser supports canvas, and if not, it can be replaced with the specified text:

Var canvas = document.getElementById ('tutorial')

If (canvas.getContext) {

Var ctx = canvas.getContext ('2d'); / / supported

} else {

/ / not supported. You can write relevant prompt text.

}

Case study:

Function draw () {

Var canvas = document.getElementById ('tutorial')

If (canvas.getContext) {

Var ctx = canvas.getContext ('2d')

}

}

Canvas {border: 1px solid black;}

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.