Posts in current category

HTML5 Canvas


May 03, 2021 12:37 HTML5


Table of contents


HTML5 Canvas

The element is a new element in HTML5 that allows you to draw the desired graphics in a Web page.

Labels define graphics, such as charts and other images, and you must use scripts to draw graphs.

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


What is Canvas?

HTML5 elements are used to draw graphics and are scripted (usually JavaScript).

Labels are just graphic containers, and you must use scripts to draw graphics.

There are several ways you can use Canva to draw paths, boxes, circles, characters, and add images.


Browser support

HTML5 Canvas HTML5 Canvas HTML5 Canvas HTML5 Canvas HTML5 Canvas

Internet Explorer 9 Plus, Firefox, Opera, Chrome, and Safari support elements.

Note: Internet Explorer 8 and earlier versions of IE browsers do not support the element.


Create a canvas

A canvas in a Web page is a rectangular box drawn by the elements of the .lt;canvas.

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

A simple example of the following is:

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

Note: Labels often need to specify an id property (frequently referenced in scripts), the width, and height properties define the size of the canvas.

Tip: You can use multiple elements in HTML pages.

Use the style property to add a border:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Try it out . . .



Use JavaScript to draw images

The canvas element itself is not drawing. All drawing must be done within JavaScript:

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Try it out . . .

Instance resolution:

First, find the element of the .lt;canvas:

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

Then, create the context object:

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

The getContext ("2d") object is a built-in HTML5 object with multiple ways to draw paths, rectangles, circles, characters, and add images.

The following two lines of code draw a red rectangle:

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

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

The fillRect (x,y, width, height) method defines how the rectangle is currently filled.


Canvas coordinates

Canvas is a two-dimensional grid.

The upper-left coordinates of canvas are (0,0)

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

To draw a 150x75 rectangle on the canvas, starting in the upper left corner (0,0).

The coordinate instance

As shown in the following image, the X and Y coordinates of the canvas are used to position the painting on the canvas.

HTML5 Canvas


Canvas - Path

To draw a line on Canvas, we'll use two methods:

  • MoveTo (x,y) defines the line start coordinates

  • LineTo (x,y) defines the line end coordinates

To draw lines we have to use the "ink" method, just likestroke().

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

HTML5 Canvas

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Try it out . . .

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

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

We actually use the "ink" method when drawing circles, such as stroke() or fill().

Draw a circle using the arc() method:

HTML5 Canvas

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Try it out . . .



Canvas - Text

Drawing text with canvas, important properties and methods are as follows:

  • font - Define the font

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

  • StrokeText (text, x, y) - Draw hollow text on canvas

Using fillText():

Draw a high 30px text (solid) on the canvas using the "Arial" font:

HTML5 Canvas

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Try it out . . .

Using strokeText():

Draw a high 30px text (hollow) on the canvas using the "Arial" font:

HTML5 Canvas

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Try it out . . .



Canvas - Gradient

Gradients can be filled in rectangles, circles, lines, text, etc., and various shapes can define different colors themselves.

There are two different ways to set up 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 more stop colors.

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

Using a gradient, set the value of fillStyle orstrokeStyle to a gradient, and then draw shapes such as rectangles, text, or a line.

Using createLinearGradient():

Create a linear gradient. Fill the rectangle with a gradient:

HTML5 Canvas

Javascript:

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it out . . .

Using createRadialGradient():

Create a radial/circular gradient. Fill the rectangle with a gradient:

HTML5 Canvas

Javascript:

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);

Try it out . . .

Tip: The parameters in parentheses of context.createRadialGradient (x, y, r, x1, y1, r1) have the following meaning when creating radial gradients using the element:

  • x: Represents the x coordinates of the start circle of the gradient
  • y: Represents the y coordinates of the start circle of the gradient
  • r: Represents the radius of the start circle
  • x1: Represents the x coordinates of the end circle of the gradient
  • y1: Represents the y coordinates of the end circle of the gradient
  • r1: Represents the radius of the end circle



Canvas - image

Place an image on the canvas using the following method:

  • drawImage( image,x,y )

Using images:

HTML5 Canvas

Place an image on the canvas:

HTML5 Canvas

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Try it out . . .



HTML Canvas reference manual

The full properties of the label can be referred to the Canvas reference manual. .

The HTML Tag

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

Read on

HTML DOM Reference Manual: HTML DOM Canvas Object