Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end H5 Tutorial HTML5 Canvas introductory learning tutorial_html5 tutorial skills

HTML5 Canvas introductory learning tutorial_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
canvas html5

HTML5

What exactly is HTML5? In the W3C HTML5 FAQ, this is stated about HTML5: HTML5 is a free license developed under an open platform.
Specifically, there are two understandings of this sentence:
“
refers to a group of technologies that together constitute the future open network platform. These technologies include HTML5 specifications, CSS3, SVG, MATHML, Geolocation, XmlHttpRequest, Context 2D, Web Fonts, and other technologies. The boundaries of this set of technologies are informal and change over time.
Refers to the HTML5 specification and is certainly part of the Open Web Platform.

”


Browser Support for Canvas
Below I’ve listed the most popular web browsers and the minimum version numbers at which they started supporting the Canvas element.


I recommend using Chrome here.

Simple HTML5 page

XML/HTML CodeCopy content to clipboard
  1. >
  3. <html lang="zh" >
  5. <head>
  6.  <meta charset="UTF- 8"> 
  7.  <title>Basic HTML5 pagetitle>
  8. head>
  10. <body> Hello Airing! body>
  12. html>

The demo running results are as follows:
2016317110813836.jpg (850×500)

HTML is composed of tag elements shaped like angle brackets <>. These tags usually appear in pairs, and tags can only be nested and not cross.
Extension:
What appears in pairs is called a closed tag, and what appears singly is called a single tag. It is closed no matter what (a single tag does not need to be closed, but closure is strictly required in XHTML). Closing tags are divided into start tags and end tags. For example, is a start tag and is an end tag. Self-labels such as
, etc.
For more tags, it is recommended that you learn about them yourself. We recommend the W3school platform for self-study.
Here we focus on the tags that appear in the above code.

XML/HTML CodeCopy content to clipboard
  1. >

This tag indicates that the web browser will render the page in standards mode. This is required for HTML5 documents according to the HTML5 specification defined by the W3C. This tag simplifies the long-standing strange differences in how different browsers render HTML pages. It is usually the first line in the document.

XML/HTML CodeCopy content to clipboard
  1. <html lang="en" >

This is the tag that contains the language description, for example, "en" for English and "zh" for Chinese.

XML/HTML CodeCopy content to clipboard
  1. <head>... head> 

These two markers indicate the beginning and end of the header information respectively. The tags contained in the header are the title, preface, description and other content of the page. It is not displayed as content itself, but affects the display effect of the web page. The most commonly used tags in headers are the <title> tag and the <meta> tag.

The following table lists all tags and functions under the HTML head element:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

XML/HTML CodeCopy content to clipboard
  1. <meta charset="UTF-8"> 

This tag describes the character encoding mode used by the web browser, which is usually set to UTF-8 here. There is no need to change it if there are no special settings required. This is also a required element for HTML5 pages.

XML/HTML CodeCopy content to clipboard
  1. <title>... title> 

This tag describes the title of the HTML displayed in the browser window. This is an important tag and is one of the main pieces of information search engines use to index content on an HTML page.

XML/HTML CodeCopy content to clipboard
  1. <body>... body> 

The actual content displayed on the web page is contained between these two .
To sum up, the HTML5 web page is composed of the and parts in the first line, and is mainly divided into two parts - the header specified by the <head> tag part, and the body specified by .
In this way, we have figured out the basic structure of the simplest HTML web page.

Add a Canvas
Adding a Canvas in HTML is very simple, just add the tag in the part of HTML! You can refer to the code below.

XML/HTML CodeCopy content to clipboard
  1. ><html lang ="zh"><head> <meta charset="UTF-8"> ;<title>Basic HTML5 pagetitle > head>
  2. <body>
  3.  <canvas id="canvas" >
  4. Your browser doesn’t support Canvas? ! Change it quickly! !
  5.  canvas>body> 
  6. html>

Since the results page is a completely blank page, I won’t post a picture here. You may be curious, why is it blank? (Nonsense, I haven’t had time to draw yet!) The original meaning of Canvas is canvas, which means canvas (nonsense...). The canvas is transparent and invisible in HTML5.
What does the text in the tag mean? That is, once the browser does not support Canvas when executing the HTML page, this text will be displayed. In other words, as long as your browser supports Canvas, this text will not be displayed on the page.
What does the id in mean? id is one of the attributes of the tag. It is used in JavaScript code to specify the name of a specific , just like a person's ID number, it is unique.
In order to display the Canvas more clearly and facilitate subsequent demonstrations, I slightly modified the code, and all subsequent drawings will be drawn on this Canvas.

XML/HTML CodeCopy content to clipboard
  1. >  
  2. <html lang="zh">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>基础的Canvastitle>  
  6. head>  
  7.   
  8. <body>  
  9. <div id="canvas-warp">  
  10.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">  
  11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.     canvas>  
  13. div>  
  14. body>    
  15. html>  

Run result:
2016317111155702.jpg (850×500)

A few notes on the above code:

1. Added the

tag and wrapped the in it. Personal habit is of no use for the time being.
2. Specify the width and height attributes for the tag to specify its width and height.
3. Added an inline style to the tag to make it a block-level element and display it in the center.

I will not explain the content of CSS here. After all, it is not the protagonist of this course, and it will take a lot of space to expand it.

Reference Canvas element


Document Object Model (DOM)
Document Object Model (DOM) is a standard programming interface recommended by the W3C organization for processing extensible markup languages. The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to compete for life and death in JavaScript and JScript, both parties gave browsers powerful functions on a large scale. Microsoft has added many proprietary things to web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes many web pages unable to display properly using non-Microsoft platforms and browsers. DOM is the masterpiece brewed at that time.
The Document Object Model represents all objects on an HTML page. It is language neutral and platform neutral. It allows the content and style of the page to be updated again after it has been rendered by the web browser. Users can access the DOM through JavaScript.
Before you start using , you first need to understand two specific DOM objects: window and document.

The window object is the highest level of the DOM. This object needs to be detected to ensure that all resources and code have been loaded before starting to use the Canvas application.
The document object contains all the HTML tags on the HTML page. This object needs to be retrieved to find instances of being manipulated using JavaScript.

JavaScript placement location
Using JavaScript to program Canvas will cause a problem: where to start the JavaScript program in the created page?
Put JavaScript into the A recent trend is to place JavaScript before the tag at the end of the HTML document, thus ensuring that the entire page has loaded while the JavaScript is running. However, since you need to use JavaScript to test whether the page loads before running the program, it is best to place the JavaScript in the <head>.
However, I don’t take the usual path (laughs), so in subsequent cases, I still put the JavaScript code at the end of the according to my own coding style. Of course, if there is a lot of JavaScript code, it is recommended to load external .js files. The code is roughly as follows:

JavaScript CodeCopy content to clipboard

In actual project development, HTML, CSS, and JS are completely separated. However, the code used for case demonstrations is slightly less, so most of them do not use the method of loading external .js files.


Getting the canvas object
Getting the canvas object is actually just one sentence.

JavaScript CodeCopy content to clipboard
  1. var canvas = document.getElementById("canvas");

Var is used for variable definition. Since JS is a weakly typed language, var is used to define any variable. The canvas following var is a variable. Use the getElementById() method of the document object to obtain the object by id. Previously, we gave the tag an id named canvas, so the last canvas in this sentence refers to the id of - canvas. (Is it a bit confusing? You need to read it a few times to figure it out.)
Getting a brush (2D environment)
What do you need first to draw? Paintbrush. Obtaining the canvas brush is also a matter of one sentence, which is to directly use the canvas object just obtained and call its getContext("2d") method.

JavaScript CodeCopy content to clipboard
  1. var context = canvas.getContext("2d");

The context here is the brush.
In other tutorials, the term 2D environment is used. I think brushes are more vivid. The inspiration comes from the g brush of the Graphics class in Java, and the principle is the same.


Summary
There are only three steps to preparation:

1. Lay out the canvas: add the canvas element by adding the tag
2. Get the canvas: get the canvas object through the id of the tag
3. Get the brush: through the canvas object getContext("2d") method to obtain the 2D environment

The corresponding code for

is three sentences:

JavaScript CodeCopy content to clipboard
  2. var canvas = document.getElementById("canvas");
  3. var context = canvas.getContext("2d");

The complete code is as follows.

JavaScript CodeCopy content to clipboard
  2. "zh">
  3. <head>
  4. "UTF-8">
  5. <title>Basic Canvas
  9. "canvas-warp">
  10. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;" width="800" height="600">
  11. Your browser doesn’t support Canvas? ! Change it quickly! !
  • <script>
  • window.onload = function(){
  • var canvas = document.getElementById("canvas");
  • var context = canvas.getContext("2d");
  • }

    • 2016317111405657.png (1433×771)

    A few points to note:

    1.JavaScript code needs to be wrapped in <script> tags.

    2.window.onload = function(){} will be executed immediately after loading the page, which means that the content of the function body after the page is loaded and executed.

    At this point, the canvas and brush have been prepared. Next, let us use the brush (context object) to draw high-definition images! Wake up! The soul of an artist!

    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

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Show More

    Hot Article

    Assassin's Creed Shadows: Seashell Riddle Solution
    3 weeks ago By DDD
    What's New in Windows 11 KB5054979 & How to Fix Update Issues
    2 weeks ago By DDD
    Where to find the Crane Control Keycard in Atomfall
    3 weeks ago By DDD
    Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation
    1 months ago By DDD
    Roblox: Dead Rails - How To Complete Every Challenge
    3 weeks ago By DDD
    Show More

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Show More

    Hot Topics

    Where is the login entrance for gmail email?
    7627
    15
    CakePHP Tutorial
    1389
    52
    What is the format of the account name of steam
    89
    11
    win11 activation key permanent
    70
    19
    nyt connections hints and answers
    31
    140
    Show More
    Related knowledge
    Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

    Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

    Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

    This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

    HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

    Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

    HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

    Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

    HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

    Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

    Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

    Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

    HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

    Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

    HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

    Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

    See all articles