基于HTMLl5 Canvas实现鼠标跟随炫彩小动画

简介

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

是 HTML5 新增的，一个可以使用脚本(通常为javaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

基本使用

看起来和标签一样，只是 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。 如果不给设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。

了解了的用途和原理，这里我们热身一下，直接用在画布上绘制一个高 30px 的空心文字，请看下面！

完整代码：使用 canvas 绘制文本

您的浏览器不支持 HTML5 canvas 标签。

接下来就要基于HTMLl5  Canvas实现鼠标跟随炫彩小动画：

这是html/css部分

先来说说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)

效果如下：

Canvas HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。