全国咨询热线:18720358503

小程序直播商城_原生js canvas完成鼠标跟从效果

类别:企业动态 发布时间:2021-01-05 浏览人次:

原生js canvas实现鼠标跟随效果     .王征   这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下

效果展示:

源码展示:

 !doctype html 
 html 
 head 
 meta charset="utf-8" 
 title canvas鼠标跟随效果(原生js实现) /title 
 script src="jquery/1.11.3/jquery.min.js" /script 
 style 
 margin:0;
 padding:0;
 body {
 overflow:hidden;
 #myCanvas {
 background-color:#000;
 /style 
 /head 
 body 
 canvas id="myCanvas" /canvas 
 script 
 var myCanvas = document.getElementById('myCanvas');
 var ctx = myCanvas.getContext("2d");
 var starlist = [];
 function init() {
 // 设置canvas区域的范围为整个页面
 myCanvas.width = window.innerWidth;
 myCanvas.height = window.innerHeight;
 init();
 // 监听屏幕大小改变 重新为canvas大小赋值
 window.onresize = init;
 // 当鼠标移动时 将鼠标坐标传入构造函数 同时创建一个对象
 myCanvas.addEventListener('mousemove', function(e) {
 // 将对象push到数组中,画出来的彩色小点可以看作每一个对象中记录着信息 然后存在数组中
 starlist.push(new Star(e.offsetX, e.offsetY));
 // 随机数函数
 function random(min, max) {
 // 设置生成随机数公式
 return Math.floor((max - min) * Math.random() + min);

this.vy = (Math.random() - 0.5) * 3; this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')'; // 初始透明度 this.a = 1; // 开始画 this.draw(); // 再star对象原型上封装方法 Star.prototype = { // canvas根据数组中存在的每一个对象的小点信息开始画 draw: function() { ctx.beginPath(); ctx.fillStyle = this.color; // 图像覆盖 显示方式 lighter 会将覆盖部分的颜色重叠显示出来 ctx.globalCompositeOperation = 'lighter' ctx.globalAlpha = this.a; ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false); ctx.fill(); this.updata(); updata: function() { // 根据偏移量更新每一个小点的位置 this.x += this.vx; this.y += this.vy; // 透明度越来越小 this.a *= 0.98; // 渲染 function render() { // 每一次根据改变后数组中的元素进行画圆圈 把原来的内容区域清除掉 ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) // 根据存在数组中的每一位对象中的信息画圆 starlist.forEach(function(ele, i) { ele.draw(); // 如果数组中存在透明度小的对象 ,给他去掉 效果展示逐渐消失 if (ele.a 0.05) { starlist.splice(i, 1); requestAnimationFrame(render); render(); /script pre 感: 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客 /pre /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


下一篇:没有了

推荐阅读

小程序直播商城_原生js canvas完成鼠标跟从效果

原生态js canvas完成电脑鼠标追随实际效果 .王征 本文关键为大伙儿详尽详细介绍了原生态js canvas完成电脑鼠标追随实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照...

2021-01-05
谷歌嘲讽FB视频效劳:广告看三秒也扣费

有着14亿客户的Facebook,是地球上规模较大的社交媒体互联网。凭着大量的客户,Facebook已经竖直行业紧追别的互连网敌人。在互联网视頻层面,Facebook的日播发量早已追到了全球较大的...

2021-01-05
手机网页制作app免费-中城建投实业(成都)有限

中城市建设投 总公司经济发展极高城市地标基本建设者Landmark Builder of Zhongcheng Construction Project中城市建设投实业公司(成都市)比较有限企业(通称“中城市建设投”)是一家全国性合理...

2021-01-05
广州凡科互联网科技股份有限公司招聘大客户销

招聘人数:30职位信息一、岗位职责:1、协助区域渠内渠道经理推广及销售成交;2、负责跟进分管区域内渠道客户经理产品推广情况;3、负责协助渠道客户经理解决销售过程中的问题,...

2021-01-05
广州凡科互联网科技股份有限公司招聘信息流推

招聘人数:7职位信息岗位职责:1、熟悉主流信息流媒体的市场投放规则(百度信息流、头条抖音、快手、广点通等);2、负责对广告素材、投放效果数据进行分析总结,精准把握受众...

2021-01-05
广州凡科互联网科技股份有限公司招聘Java中高级

招聘人数:18职位信息职位描述:1、负责部门核心自有产品后端设计、开发; 2、负责后端技术难题攻克、相关电商数据统计、分析平台设计开发;岗位描述:1、3-6年相关工作经验,...

2021-01-05
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信