Canvas Basic API Usage Tutorial
Introduction
Canvas is widely used and can be used as game engine, form document, editor, chart, drawing board, etc. Starting from the basic canvas API, combined with certain algorithms and functions, you can draw any effect you want and build more cool applications.
Draw Rectangle
Basic API
- fillStyle
- fillRect
- strokeStyle
- strokeRect
- lineWidth
- lineCap
- lineJoin
- clearRect
- toDataURL
Code
The following shows the core js code
const canvas = document.getElementById("canvas");
// Confirm the browser Wisdom City canvas element
if (canvas.getContext) {
// Get the canvas context
const context = canvas.getContext("2d");
// Set the fill to red
// Any color value of css can be used: color name, hexadecimal code, rgb, rgba, hsl, hsla
context.fillStyle = "#ff0000";
// Draw a square and fill it with the red color set in the previous step
// x coordinate 10, y coordinate 10, width 80, height 80
context.fillRect(10, 10, 80, 80);
// Set the stroke to green
// Any color value of css can be used: color name, hexadecimal code, rgb, rgba, hsl, hsla
context.strokeStyle = "green";
// Set the stroke width, any integer
context.lineWidth = 10;
// Draw a square and use the green stroke set in the previous step
// x coordinate 10, y coordinate 10, width 80, height 80
context.strokeRect(10, 10, 80, 80);
// Set the fill to be blue semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
// Draw a rectangle and fill it with the blue translucent set in the previous step
context.fillRect(50, 50, 80, 100);
// Set the end style of the line
/**
* Flat head: butt
* Round head: round
* Square head: square
* */
context.lineCap = "square";
// Set the way the lines intersect, the default is miter
/**
* Round: round
* Oblique crossing: bevel
* Miter: miter
* */
context.lineJoin = "round";
// Set the stroke to blue
context.strokeStyle = "blue";
// Draw a rectangle and use the blue stroke set in the previous step
context.strokeRect(50, 50, 80, 100);
// Clear the rectangular area on the canvas
// x coordinate 100, y coordinate 100, width 20, height 20
context.clearRect(100, 100, 20, 20);
// toDataURL converts canvas into a picture address in base64 string format
const imgURI = canvas.toDataURL("image/png");
const image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
Demo
For detailed implementation, please see the demo below
Draw Path
Basic API
arc(x,y,radius,startAngle,endAngle,counterclockwise)
Draw an arc with (x, y) as the center. The radius of the arc is radius, and the start and end angles (in radians) are startAngle and endAngle, respectively. The last parameter indicates whether startAngle and endAngle are calculated in a counterclockwise direction, and a value of false means calculation in a clockwise direction.
arcTo(x1,y1,x2,y2,radius)
Draw an arc from the previous point to (x2, y2), and pass through (x1, y1) with a given radius
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
Draw a curve from the previous point to (x, y), and use (c1x, c1y) and (c2x, c2y) as the control points
lineTo(x,y)
Draw a straight line from the previous point to (x,y)
moveTo(x,y)
Move the drawing cursor to (x,y) without drawing a line
quadraticCurveTo(cx,cy,x,y)
Draw a quadratic curve from the previous point to (x, y), and use (cx, cy) as the control point
rect(x,y,width,height)
Draw a rectangle from the point (x, y), the width and height are specified by width and height respectively
Code
The following shows the core js code
// Draw a clock dial without numbers
const drawing = document.getElementById('canvas');
if (drawing.getContext) {
const context = drawing.getContext('2d');
// start path
context.beginPath();
// Draw the outer circle
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
// Draw the inner circle
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
// Draw the minute hand
context.moveTo(100, 100);
context.lineTo(100, 15);
// draw the hour hand
context.moveTo(100, 100);
context.lineTo(35, 100);
// Stroke path
context.stroke();
}
Demo
For detailed implementation, please see the demo below
Comments