html5canvas实现动态粒子背景
什么是 canvas
canvas 是 HTML5 新定义的标签,通过使用脚本(通常是 JavaScript)绘制图形。 标签只是图形容器,相当于一个画布,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成,相当于使用画笔在画布上画画。
默认情况下, 没有边框和内容。默认是一个 300*150 的画布,所以我们创建了 之后要对其设置宽高。
(圈重点)我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过 css 属性来设置宽高。因为通过 css 属性设置的宽高会使 canvas 内的图像按照 300乘150 时的比例放大或缩小
话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html {
height: 100%
}
body {
margin: 0;
height: 100%;
background: #fff;
}
canvas {
display: block;
width: 100%;
h