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

This article mainly introduces the relevant knowledge of "how html5 creates Canvas canvas". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how html5 creates Canvas canvas" can help you solve the problem.

Let's first look at how the canvas tag in HTML5 creates a canvas. After we draw graphics through JavaScript, we place a canvas element in the page, which is equivalent to placing a canvas in the page, and the canvas element has a variety of ways to draw graphics.

1. First of all, canvas is a double tag, so we can use the width and height attributes in the tag to define the size of the canvas so that we can create a hidden canvas, which we can display through the style attribute. The code is as follows:

Canvas canvas sharing

This completes the creation of a canvas. (add: when the width and height of the canvas attribute is not set, it defaults to 300px. Of course, in addition to setting it in the canvas property, we can also make a setting in the css property. However, if the width and height attribute is not the same as the initial ratio, it will be distorted. Therefore, it is recommended that you generally do not use css to set properties! )

two。 Since you don't have the ability to draw images in the canvas attribute, you have to do it through JavaScript. Then let's try it! The code is as follows:

Canvas canvas sharing var can = document.getElementById ("mycanvas"); var ctx = can.getContext ("2d"); ctx.fillStyle = "# 99CCFF"; ctx.fillRect (50,50,100,100) This is the end of the introduction to "how html5 creates the Canvas canvas". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.