As a result of my work, canvas is one of the most powerful elements of html5. Using it can do some wonderful things in the browser. You have heard more or less about the powerful use of canvas. I will not go into details here.
The powerful function of canvas is represented by the context object of canvas. This environment variable can be obtained from the canvas element.
Next, let's take a look at the canvas example for ease of explanation. A string is displayed on the canvas, which is roughly perpendicular to the canvas. The Code is as follows:
<!DOCTYPE HTML>In the preceding HTML code, CSS is used to set the canvas background color and other CSS attributes. Therefore, you can set CSS styles like other Div and H1 elements in canvas. Canvas is not interesting in that it can be set to be a style, but in JavaScript code. Below I wrote the canvas program in the above HTML. The Code is as follows:
<script type="text/javascript"> var canvas = document.getElementById(‘canvas‘), context = canvas.getContext(‘2d‘); context.font = ‘38pt Arial‘; context.fillStyle = ‘cornflowerblue‘; context.strokeStyle = ‘blue‘; context.fillText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15); context.strokeText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15);</script>The preceding JavaScript code consists of three steps:
1. Use document. getelementbyid to obtain the Canvas Element.
2. Call the getcontext ('2d ') method on the canvas object to obtain the drawing environment variable.
3. Use the drawing environment object to draw on the canvas element.Fillstyle and strokestyle specify the color, gradient, or pattern used when the image is filled and the path is stroke.
Filltext () and strokestyle both require three parameters: the content of the text to be drawn and the horizontal and vertical coordinates of the text displayed in the canvas.
PS: You cannot use the PX suffix when setting the width and height of a canvas. Although many browsers support the PX suffix, it is not technically accepted by the canvas specification, these values can only be non-negative.
There are two ways to set the width and height of a canvas: one is to directly specify the attribute values for the width and height of a canvas, and the other is to set the width and height in CSS. However, this setting will produce unexpected results. This shows the size of the canvas element and the drawing surface.
The two elements are the same in size, but the plot is different. In fact, we mainly modify the width and height attributes to set the size of the canvas element. In this way, the size of the element itself and the painting surface will be set to the attribute value. The width and height values set through CSS only modify the element size and do not modify the painting surface size. Therefore, the browser will change the painting surface from the default value (300*150) stretch to the modified value (600*300 ).Canvas is a very powerful element. All I know now is to understand the canvas element. It still takes a long time to learn, day up.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
