Canvas Example Application 100 +This column provides basic knowledge of canvas, advanced animation, related application extensions and other information.
As a part of HTML, canvas is an important foundation for the visualization of images, icons and maps. Learning canvas will be very important in other applications.
Article directory
-
- renderings
- source code
- canvas basic properties
- canvas basic methods
Realize moving graphics and play multiple static pictures downwards. The number of frames in one second must be greater than the screen refresh (60). That is, the function is executed every 1/60s to add a background color of white mask to the square drawn each time.
Renderings
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas raindrop effect</title>
<style>
body {<!-- -->
margin: 0;
}
.rain {<!-- -->
display: block;
background-color: #000;
}
</style>
</head>
<body>
<canvas class="rain"></canvas>
<script>
// 1. Get the canvas and set the size
var canvas = document.querySelector('.rain');
var ctxWidth, ctxHeight; // Define the width and height of the canvas
~~function setResize() {<!-- --> // Change the width and height of the canvas in real time according to changes in the browser window, consistent with the browser
window.onresize = arguments.callee;
ctxWidth = window.innerWidth;
ctxHeight = window.innerHeight;
canvas.width = ctxWidth;
canvas.height = ctxHeight;
}();
var ctx = canvas.getContext('2d');
// 2. Draw a single moving raindrop, and perform the next raindrop object Rain processing based on the single raindrop.
/* var y = 10;
setInterval(function () {
//Add a raindrop mask and use a transparent color to make the raindrops look gradually transparent upward.
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0, 0, ctxWidth, ctxHeight);
//Draw a small rectangle of raindrops
ctx.fillStyle = 'blue';
ctx.fillRect(10, y + + , 4, 10);
}, 1000 / 60); */
function random(min, max) {<!-- --> // Generate random numbers from min to max
return Math.random() * (max - min) + min;
}
// 3. Set the raindrop object
function Rain() {<!-- --> };
Rain.prototype = {<!-- -->
init: function () {<!-- -->
this.x = random(0, ctxWidth);
this.y = 0;
this.vY = random(4, 5); // The speed of raindrops moving on the Y axis
this.h = random(0.8 * ctxHeight, 0.9 * ctxHeight); // The Y-axis position where the raindrops stop, 80%-90% of the height of the entire canvas
this.r = 1; // Circle radius
this.vR = 1; // The speed at which the radius of the circle changes
},
draw: function () {<!-- -->
if (this.y <= this.h) {<!-- -->
//Draw a small rectangle of raindrops
ctx.beginPath();
ctx.fillStyle = '#31f7f7';
ctx.fillRect(this.x, this.y, 4, 10);
} else {<!-- -->
ctx.beginPath();
ctx.strokeStyle = '#31f7f7';
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.stroke();
}
},
move: function () {<!-- -->
if (this.y <= this.h) {<!-- -->
this.y + = this.vY;
} else {<!-- -->
if (this.r <= 100) {<!-- -->
this.r + = this.vR;
}
else {<!-- -->
this.init();
}
}
this.draw();
}
}
// Create multiple raindrop functions and push the raindrops into arrRains
var arrRains = [];
function createRain(num) {<!-- -->
// Generate a raindrop every 200ms
for (var i = 0; i <= num; i + + ) {<!-- -->
setTimeout(function () {<!-- -->
var rain = new Rain();
rain.init();
rain.draw();
arrRains.push(rain);
}, 200 * i);
}
}
createRain(50);
setInterval(function () {<!-- -->
//Add a raindrop mask and use a transparent color to make the raindrops look gradually transparent upward.
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0, 0, ctxWidth, ctxHeight);
for (item of arrRains) {<!-- -->
item.move();
}
}, 1000 / 60); // Execute the function every 1/60 seconds
</script>
</body>
</html>
\t\t\t\t\t\t\t
Basic properties of canvas
| Property | Property | Property |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
Basic methods of canvas
| Method | Method | Method |
|---|---|---|
| arc() | arcTo() | addColorStop() |
| beginPath() | bezierCurveTo() | clearRect() |
| clip() | close() | closePath() |
| createImageData() | createLinearGradient() | createPattern() |
| createRadialGradient() | drawFocusIfNeeded() | drawImage() |
| ellipse() | fill() | fillRect() |
| fillText() | getImageData() | getLineDash() |
| isPointInPath() | isPointInStroke () | lineTo() |
| measureText() | moveTo() | putImageData() |
| quadraticCurveTo() | rect() | restore() |
| rotate() | save() | scale() |
| setLineDash() | setTransform() | stroke() |
| strokeRect() | strokeText() | transform() |
| translate() |