Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > Learn while playing with HTML5 (1) Canvas implementation method _html5 tutorial skills

Learn while playing with HTML5 (1) Canvas implementation method _html5 tutorial skills

WBOY
Release： 2016-05-16 15:51:20
Original
1554 people have browsed it
1. tag

Html5 introduces a new tag. The area represented by this tag is like a canvas. All your graphics drawings will end up To be presented on this canvas. With this tag, the graphics performance of the browser has been greatly improved. Do Flash and SilverLight feel threatened?

News link: Google claims that the Chrome 7 browser will be 60 times faster

The usage of the tag is very simple, as follows:

Copy the code
The code is as follows:


Your browser does not support the Canvas tag



tags are not much different from ordinary HTML tags. You can set its width and height, and set its background color, border style, etc. through CSS. wait.

You can find more about the tag here. The content in the middle of the

tag is the replacement content. If the user's browser does not support the tag, this content will be displayed; if the user's browser supports the tag, then this content will be displayed. The content of the section will be ignored.

The above code displays as follows:

Your browser does not support the Canvas tag

If you are using IE browser, you may only be able to view it Get a tip; if you are using Google Chrome or Firefox, you can see a red square area.
2. Rendering Context
In fact, we can’t do anything just with the tag. Students who have played with Windows programming all know that before drawing in Windows, you must first get a Device context DC, drawing on the tag also requires first obtaining a rendering context. Our graphics are not drawn directly to the screen, but to the context (Context) first, and then refreshed to the screen. .
Off-topic: Why do we need to create such a complicated concept as "context"? Because of the context object, we can make various graphics devices look the same in our eyes. We only need to focus on drawing, and let the operating system and browser take care of other work. To put it bluntly, It is to turn various concrete things into unified abstractions, thereby reducing our burden.
Getting the context is very simple, just need the following two lines of code:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
Get it first canvas object, and then call the getContext method of the canvas object. This method currently can only pass in the parameter "2d". In the near future, it may support the parameter "3d". You must understand what that means, let's look forward to it.
The getContext method returns a CanvasRenderingContext2D object, which is the rendering context object. You can find more information about it here, which are some drawing methods.

3. Browser support
In addition to displaying alternative content on unsupported browsers, we can also use scripts to check whether the browser supports canvas , the method is very simple, just determine whether the getContext function exists, the code is as follows:

Copy the code
The code is as follows:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Supports tag");
} else {
alert(" tag is not supported");
}


四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出



提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
Related labels：
html5
source：php.cn
Previous article：Solution to IE supporting HTML5_html5 tutorial tips Next article：html5 learn a simple color picker _html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template