基于HTMLl5 Canvas实现鼠标跟随炫彩小动画
简介
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。
基本使用
<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。 如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。
了解了<canvas>的用途和原理，这里我们热身一下，直接用<canvas>在画布上绘制一个高 30px 的空心文字，请看下面！
完整代码：使用 canvas 绘制文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello word</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.strokeText("Hello World",10,50);
</script>
</body>
</html>接下来就要基于HTMLl5 Canvas实现鼠标跟随炫彩小动画：
这是html/css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>炫彩小球球</title>
<style type="text/css">
#canvas {
border: 1px solid #CCCCCC;
}
</style>
</head>
<body>
<canvas id="canvas" width="" height=""></canvas>
</body>
</html>先来说说js部分
首先 获取画布
let canvas = document.querySelector('#canvas');
然后定义宽高
canvas.width = window.innerWidth
canvas.height = window.innerHeight
定义为2d,circular为圆
let circular = canvas.getContext('2d');定义数组存取增加的圆
let CirArr = [] 定义构造函数
function Cir(obj) {
for (let prop in obj) {
this[prop] = obj[prop]
}
this.dotX = Math.random() * 12 - 7
this.dotY = Math.random() * 12 - 7
this.color = "rgb(" + (parseInt(Math.random() * 200) + 9) + "," + (parseInt(Math.random() * 230) + 18) + ",150)";
}
圆的操作
CirArr.push(this)
// 绘制圆
Cir.prototype.addCir = function() {
// 开始路径绘制
circular.beginPath()
// 画圆
circular.arc(this.x, this.y, this.r, 0, Math.PI*2)
circular.fillStyle = this.color
circular.fill()
}
Cir.prototype.ani = function() {
this.x += this.dotX
this.y += this.dotY
this.r--
if (this.r <= 0) {
// 清除r小于0的圆
for (let i = 0; i < CirArr.length-1; i++) {
if (CirArr[i] === this) {
CirArr.splice(i, 1)
}
}
}
}
鼠标移入事件
canvas.onmousemove = function(e) {
new Cir({
x: e.offsetX, //x坐标
y: e.offsetY, //y坐标
r: 30 //半径
})
}
设置定时器
setInterval(() => {
circular.clearRect(0, 0, window.innerWidth, window.innerHeight)
for (let i = 0; i < CirArr.length-1; i++) {
CirArr[i].ani()
CirArr[i].addCir()
}
},20)
效果如下：
- 点赞
- 收藏
- 关注作者
评论（0）