简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> H5 Tutorial> body text

HTML5Canvas explanation and example tutorials

零下一度
Release： 2017-05-16 11:39:04
Original
2134 people have browsed it

HTML5Canvas

The canvas> tag defines graphics, such as charts and other images, and you must use scripts to draw graphics.

Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas.

HTML5Canvas explanation and example tutorials

##What is Canvas?

HTML5 element is used for drawing graphics through scripts (usually

JavaScript) to complete.

tags are just graphics containers, you have to use a script to draw the graphics.

You can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the element.

Note: Internet Explorer 8 and earlier IE This version of the browser does not support the element.

Create a canvas (Canvas)

A canvas is a rectangular box in a web page, drawn through the element.

Note: By default, the element has no borders and content.

A simple example is as follows:

Copy after login

Note: Tags usually need to specify an id attribute (often referenced in scripts), and the width and height attributes define the size of the canvas.

Tip: You can use multiple elements in an HTML page.

Use the style attribute to add borders:

Example

Copy after login

Use JavaScript to Drawing images

The canvas element itself does not have

drawingcapabilities. All drawing work must be done inside JavaScript:

Example

Copy after login

Example analysis:

First, find the element: 

var c=document.getElementById("myCanvas");
Copy after login

Then , create context

Object:

var ctx=c.getContext("2d");
Copy after login

getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters and adding images.

The following two lines of code draw a red rectangle: 

ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
Copy after login

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black).

fillRect(x,y,width,height) method defines the current filling method of the rectangle.

Canvas coordinates

canvas is a two-dimensional grid.

The coordinates of the upper left corner of the canvas are (0,0)

The fillRect method above has parameters (0,0,150,75).

Means: Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

【Related Recommendations】


1.

Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2.

Free h5 online video tutorial##3.

php.cn original html5 video tutorial

The above is the detailed content of HTML5Canvas explanation and example tutorials. For more information, please follow other related articles on the PHP Chinese website!
Related labels：
canvas html5 Tutorial
source：php.cn
Previous article：Introducing examples of HTML5 semantic elements Next article：Detailed introduction and example code of HTML5 Input type
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 to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript.
From 2023-10-13 08:52:25
0
2
317
Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
From 2023-09-12 12:20:33
0
1
280
HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it
From 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
From 2023-09-09 20:06:48
0
1
362
Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
From 2023-09-06 12:15:38
0
1
240
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！