HTML5 Canvas

What is Canvas?

HTML5 <canvas> element is used for drawing graphics, which is done through scripts (usually JavaScript).

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

<canvas> 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 <canvas> element.

Note: Internet Explorer 8 and earlier The IE version of the browser does not support the <canvas> element.

Create a canvas (Canvas)

A canvas is placed on the web page is a rectangular box, drawn through the <canvas> element.

Note: By default, the <canvas> element has no border and content.

<canvas>A simple example is as follows:

<canvas id="myCanvas" width="200" height="100"></canvas> ;

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

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

Use the style attribute to add borders:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
</html>

Run the program and try it

Use JavaScript to draw images

The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

Program running result:

Example analysis:

First, find the <canvas> element:

##var c=document.getElementById ("myCanvas");

Then, create the context object:

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

##getContext("2d") object is a built-in HTML5 object that has a variety of drawing paths, rectangles, circles, characters, and added Image method.

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0,150,75);
Set the fillStyle property to 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 coordinatescanvas 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).

Coordinate example

As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular frame where the mouse moves.

Canvas - Path

To draw a line on the Canvas, we will use the following two methods:

moveTo(x ,y) Define the lineStart coordinate

lineTo(x,y) Define lineEnd coordinate

To draw lines we must use the "ink" method, just like stroke().

Example

Define the starting coordinates ( 0,0), and the end coordinate (200,100). Then use the stroke() method to draw the line:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
</body>
</html>

Program running result:

To draw a circle in canvas, we will use the following method:

##arc(x,y,r,start,stop)

In fact, we use the "ink" method when drawing a circle, such as stroke() or fill().

Example

Use arc() method to draw a circle:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>

Program running result:

Canvas - Text

Use canvas to draw text. The important properties and methods are as follows:

font - Define font

fillText(text,x,y) - Draw solid text on canvas

strokeText(text,x,y) - Draw hollow text on canvas

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,30);
    ctx.strokeText("你好吗！",10,80);
</script>
</body>
</html>

Program running result:

Canvas - Gradient

Gradient can be filled in rectangles, circles, lines, text, etc. Various shapes can be customized Define different colors.

There are two different ways to set the Canvas gradient:

createLinearGradient(x,y,x1,y1) - Create a line gradient

createRadialGradient(x,y,r,x1,y1,r1) - Create a radial/circular gradient

When we use gradient objects, we must use two or two Stop color above.

addColorStop()The method specifies the color stop. The parameters are described by coordinates, which can be 0 to 1.

Use gradient, set the value of fillStyle or strokeStyle to the gradient, Then draw a shape, such as a rectangle, text, or a line.

Example

Use createLinearGradient() to create a linear gradient. Fill the rectangle with gradient:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,10);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // 充满度
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

Program running result:

##Example

Use createRadialGradient() to create a radial/circular gradient. Fill the rectangle with gradient:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Create gradient
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

Program running result:

##Canvas - Image

You can put a picture on the canvas, so you can do some operations on the picture and add some materials you want, such as text.

Place an image on the canvasUse the following method:

drawImage(image,x,y)

Using images

Example

Place an image To the canvas:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>使用图像:</p>
<img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    img.onload = function() {
        ctx.drawImage(img,10,10);
    }
</script>
</body>
</html>

Program running result:

# #HTML Canvas Reference Manual

The complete attributes of the tag can be found in the Canvas Reference Manual.

The HTML <canvas> tag

< ;canvas>The canvas element of HTML5 uses JavaScript to draw images on the web page.

## Tag	Description

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好吗！",10,80); </script> </body> </html>

submit Reset Code

Automatic operation

HTML5 Canvas

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]