canvas + JS 实现鼠标滑过小星星效果

最新推荐文章于 2021-12-12 13:47:15 发布
最新推荐文章于 2021-12-12 13:47:15 发布
阅读量837 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ink_s/article/details/85164192
版权

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./styleAndJS/style2.css" rel="stylesheet">
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="./jquery/jquery-3.3.1.js"></script>
<title>inks</title>
</head>

<body  id= "body">

<canvas class="canvas_1" id="canvas_1" onmouseout="mouseOut()">
</canvas>
</body>


<script type="text/javascript" src="./styleAndJS/js4.js"></script>
<!-- <script type="text/javascript" src="./styleAndJS/js3.js"></script> -->

</html>

 

 

JS4.js

 

var canvas = document.getElementById('canvas_1');
var context = canvas.getContext('2d');
var canvasH = canvas.offsetHeight;
var canvasW = canvas.offsetWidth;
canvas.width = canvasW;
canvas.height = canvasH;

var x =-100;
var y =-100;
var lastScrollY = 0;
var starts = new Array();

var count = 0;
var countStatic = 5;
var countMove = 1;
var createStatic =2;
var createMove =2;
var isMove = false;
var timer = null;

for(var i = 0;i<5;i++){
	starts[i] = createStart((x+randomNum(-5,5)),(y+randomNum(-30,-40)));
}


drawStarts();
//设置定时器
setInterval('drawStarts()',10);

function createStart(centreX,centreY) {
	  var oneStart = new Object;
	  oneStart.centreX = centreX;
	  oneStart.centreY = centreY;
	  oneStart.size = randomNum(1,2);
	  oneStart.color = randomClolr();
	  oneStart.speed = randomNum(5,8);
	  oneStart.alpha = 1;
	  oneStart.angle = randomNum(180,360);
	  return oneStart;
	} 

function drawStarts(){
	//console.log("starts.length:"+starts.length);
	context.clearRect(0,0,canvasW,canvasH);
	for(var i = 0;i<starts.length;i++){
		
		drawStart(starts[i].centreX,starts[i].centreY,starts[i].size,starts[i].color,starts[i].alpha);
		
		starts[i].centreX = starts[i].centreX + Math.cos(starts[i].angle * Math.PI / 180)*starts[i].speed;
		
		starts[i].centreY = starts[i].centreY + Math.sin(starts[i].angle * Math.PI / 180)*starts[i].speed;
		
		 if(starts[i].speed<=3){
			starts[i].speed = starts[i].speed-randomNum(0.1,1);
			if(starts[i].speed<1){
				starts[i].speed = 1;
			}
			starts[i].angle =90;
			starts[i].alpha = starts[i].alpha-0.01;
			//starts[i].size = starts[i].size -0.01; 
		} else{
			starts[i].speed = starts[i].speed-randomNum(0.7,1);
			starts[i].size = starts[i].size +0.1; 
		}
		 
			if(starts[i].alpha<=0){
				starts.splice(i,1);
				i--;
			} 
		
	}
	count++;
	if(!isMove){
		if(count>countStatic){
			count=0;
			var l = starts.length;
			for(var i =0;i<createStatic;i++){
				starts[l+i] = createStart((x+randomNum(-10,10)),(y+randomNum(-30,-40)));
			}
		}
	}else{
		if(count>countMove){
			count=0;
			var l = starts.length;
			for(var i =0;i<createMove;i++){
				starts[l+i] = createStart((x+randomNum(-10,10)),(y+randomNum(-30,-40)));
			}
		}
	}
}
	

	


	
//	var m = randomNum(0,maxStartNumber-minstarNumber);
//	var l = starts.length;
//	if( l<(minstarNumber+m) ){
//		for(var k =0;k<(minstarNumber+m-l);k++){
//			starts[l+k] = createStart((x+randomNum(-10,10)),(y+randomNum(-10,10)));
//		}
//	}



function drawStart(centreX,centreY,size,color,alpha) {
	context.globalAlpha = alpha;
	context.beginPath();
	context.lineWidth = 2;
	context.moveTo(centreX, centreY-5*size);
	context.quadraticCurveTo(centreX,centreY,centreX-5*size,centreY);
	context.quadraticCurveTo(centreX,centreY,centreX,centreY+5*size);
	context.quadraticCurveTo(centreX,centreY,centreX+5*size,centreY);
	context.quadraticCurveTo(centreX, centreY,centreX, centreY-5*size);
	context.fillStyle= color;
	context.fill();

	size = size/1.5;
	var color2 = 0XFFFFFF;
	var grd2 = context.createRadialGradient(centreX,centreY,0,centreX,centreY,size*4);
	grd2.addColorStop(0,  getRGBA(color2,1));
	grd2.addColorStop(1, getRGBA(color2,0));
	context.beginPath();
	context.lineWidth = 0.5;
	context.moveTo(centreX, centreY-5*size);
	context.quadraticCurveTo(centreX,centreY,centreX-5*size,centreY);
	context.quadraticCurveTo(centreX,centreY,centreX,centreY+5*size);
	context.quadraticCurveTo(centreX,centreY,centreX+5*size,centreY);
	context.quadraticCurveTo(centreX, centreY,centreX, centreY-5*size);
	context.fillStyle= grd2;
	context.fill();
}



//var centreX = 300;
//var centreY = 300;
//var size = 6;
//var color = "#00ff00";
//var speed = 1;
//var alpha = 1;
//var angle = 0;

//context.beginPath();
//context.lineWidth = 0.5;
//context.strokeStyle   = color;
//context.moveTo(centreX, centreY-5*size);
//context.quadraticCurveTo(centreX,centreY,centreX-5*size,centreY);
//context.moveTo(centreX-5*size,centreY);
//context.quadraticCurveTo(centreX,centreY,centreX,centreY+5*size);
//context.moveTo(centreX,centreY+5*size);
//context.quadraticCurveTo(centreX,centreY,centreX+5*size,centreY);
//context.moveTo(centreX+5*size,centreY);
//context.quadraticCurveTo(centreX, centreY,centreX, centreY-5*size);
//context.stroke();

//var grd = context.createRadialGradient(centreX,centreY,0,centreX,centreY,size*10);
//grd.addColorStop(0,  getRGBA(color,1));
//grd.addColorStop(1, getRGBA(color,0));



//var grd = context.createLinearGradient(startX, 0, startX+size, 0);
//grd.addColorStop(0,  getRGBA(color,1));
//grd.addColorStop(0.5, getRGBA(color,1));
//grd.addColorStop(1, getRGBA(color,1));
//
//
//var grd2 = context.createRadialGradient(150,150,0,150,150,50);
//grd2.addColorStop(0,  getRGBA(color,0.2));
//grd2.addColorStop(0.5, getRGBA(color,1));
//grd2.addColorStop(1, getRGBA(color,0.2));
//
//context.beginPath();
//context.strokeStyle   = grd;
//context.moveTo(startX+size/2, startY);
//context.quadraticCurveTo((startX+size/4)+0.75*size/4 ,(startY+size/2)-0.25*size/2,startX+size/4, startY+size/2);
//context.moveTo(startX+size/4, startY+size/2);
//context.quadraticCurveTo((startX+size/2)-0.25*size/4,(startY+size)-0.75*size/2,startX+size/2, startY+size);
//context.moveTo(startX+size/2, startY+size);
//context.quadraticCurveTo((startX+size-size/4)-0.75*size/4,(startY+size)-0.75*size/2,startX+size-size/4, startY+size/2);
//context.moveTo(startX+size-size/4, startY+size/2);
//context.quadraticCurveTo((startX+size-size/4)-0.75*size/4,(startY+size/2)-0.25*size/2,startX+size/2, startY);
//context.lineWidth = 2;
//context.fillStyle=grd2;
//context.fill();
//context.stroke();



//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}

function randomClolr(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}



function getRGBA(clolr,a) {
	return 'rgba('+((clolr & 0xff0000)>>16)+','+ ((clolr & 0xff00)>>8)+','+(clolr & 0xff)+','+a+')';
}



function mouseMove(event){
    isMove = true;
    x = event.x;
    y = event.y;
    clearTimeout(timer);
    timer = setTimeout(function(){
        isMove = false;
    },30);
}

window.onscroll=function(){
	 
	//变量t是滚动条滚动时，到顶部的距离
	var t =document.documentElement.scrollTop||document.body.scrollTop;
	
	y = y + t - lastScrollY;
	lastScrollY = t;
	}

function mouseOut(){
	x=-100;
	y=-100;
}

//windowAddMouseWheel();
//function windowAddMouseWheel() {
//    var scrollFunc = function (e) {
//        e = e || window.event;
//        if (e.wheelDelta) {
//        	
//        } else if (e.detail) {
//        	
//        }
//    };
//    //给页面绑定滑轮滚动事件
//    if (document.addEventListener) {
//        document.addEventListener('DOMMouseScroll', scrollFunc, false);
//    }
滚动滑轮触发scrollFunc方法
//    window.onmousewheel = document.onmousewheel = scrollFunc;
//}

 

 

style2.css

 


.canvas_1{
        width: 100%;
        height: 1500px;
    background: #c77777;
}

body{
    overflow-x:hidden;
    cursor:url("./images/a1.ico"),pointer;
}
 

ink_s
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js鼠标跟随特效鼠标滑过出现小星星动画
樱花的博客
08-02 2万+
页面代码  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; body{ background-color: #361c65;o
HTML5 Canvas 鼠标滑过3D动画效果
06-04
用html实现的鼠标滑过就会有3D动的效果 可以直接使用 方便更改 、
canvas鼠标滑过效果
weixin_42448623的博客
12-02 435
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas鼠标滑过效果</title> <style> :root,
Canvas 鼠标效果
weixin_42199478的博客
07-23 265
Canvas 鼠标效果代码效果引用 代码 var c = new CanvasStart(); //数组 var list=[]; //鼠标移动事件 c.move=function(x,y){ // x,y:鼠标位置 list.push({ x:x, y:y, color:rgba(),//随机颜色 r:1,// }); // 限制数组长度 200 if(list.length>200){
canvas粒子鼠标跟随效果
07-31
canvas粒子跟随效果。canvas粒子跟随效果。canvas粒子跟随效果。
html鼠标经过状态,HTML5 - 让Canvas内部元素实现鼠标移入、移出效果（Tooltip提示效果）...
weixin_39969568的博客
05-30 1810
Canvas是一种非保留性的绘图界面，即不会记录过去执行的绘图操作，而是保持最终结果(构成图像的彩色像素)。如果想让 Canvas变得具有交互性，比如用户可以选择、拖动画布上的图形。那么我们必须记录绘制的每一个对象，才能在将来灵活的修改并重绘它们，实现交互。在之前的文章中(点击查看)我演示了如何实现通过鼠标点击来选择图形，以及图形的拖动。本文接着介绍如何实现当鼠标移入到一个图形元素上，显示相应t...
Canvas鼠标经过星星连成线特效
06-24
在“Canvas鼠标经过星星连成线特效”这个项目中，我们利用Canvas的强大功能，实现了一种互动效果：当用户鼠标在画布上移动时，星星会随着鼠标的轨迹连成线，营造出一种独特的视觉体验。 首先，我们需要创建一个`...
Canvas鼠标经过星星连成线特效特效代码
03-20
在本文中，我们将深入探讨如何使用HTML5的Canvas API实现“Canvas鼠标经过星星连成线特效”。这是一种引人入胜的交互式设计，当用户鼠标移动时，星星会沿着鼠标的路径连接起来，形成一条发光的轨迹。我们将讨论涉及...
HTML5 canvas鼠标经过星星连线代码.zip
05-14
这个“HTML5 canvas鼠标经过星星连线代码”压缩包显然是一个前端开发实例，它展示了如何利用HTML5的canvas来实现一个交互式的星星连线效果，当鼠标在画布上移动时，会连接鼠标位置与星星之间的路径。 首先，我们要...
Canvas鼠标经过星星连成线特效.zip
最新发布
11-16
在本文中，我们将深入探讨如何使用HTML5的Canvas API，CSS以及JavaScript（可能结合jQuery库）来实现"鼠标经过星星连成线特效"。这个特效通常用于网站的背景设计，可以提升用户体验，增加视觉吸引力。 首先，让我们...
鼠标在canvas上悬浮，并提示鼠标位置信息
11-24
鼠标在canvas上移动，显示鼠标位置
JavaScript canvas实现跟随鼠标事件
12-28
本文实例为大家分享了用canvas实现跟随鼠标事件的具体代码，供大家参考，具体内容如下 //鼠标移动 展现光片 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <style> body { margin: 0; overflow: hidden; } #canvas { background: #000; } </style> </head> <body> <canvas id=canvas></canvas> [removed] var canvas = documen
js配合Canvas实现拖尾特效.zip
09-29
js配合Canvas实现拖尾特效.zip
高级流水灯--水滴效果(渐变带拖尾效果)实现和讲解.pdf
07-20
高级流水灯--水滴效果(渐变带拖尾效果) 也许你会觉得流水灯很简单，但是如果让你设计出水滴效果的高级流水灯，你会吗？看了这个，也许你就会了。太漂亮了。
js鼠标拂过星星飘落动画特效特效代码
03-20
本篇文章将详细讲解如何利用JavaScript实现"鼠标拂过星星飘落动画特效"。 首先，我们需要了解这个特效的基本原理。这个特效的实现基于HTML5的Canvas元素，它提供了一个在网页上绘制图形的画布。当用户鼠标移动到...
H5+Canvas 创建圆圈鼠标滑过圆圈显示提示信息(跟随鼠标移动)
朝花夕拾的博客
08-14 1266
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hangge.com</title> <style> canvas { cursor: pointer; border: 1px solid black; } </style> <script> // 这个方法...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
qq_40517035的博客
12-12 2080
AS特效小白进。AS大佬也进吧。 代码多有不足，恳请指正。
canvas+map/area实现鼠标经过提示信息
qq_28020627的博客
04-03 3079
canvas多级联动  #mes{   width: 200px;   height: 50px;   border-radius: 10px;   position: absolute;   left:30px;   top:0;   display: none;   background-color: #fff;   padding:10px;   border: 2
【JS】满天都是小星星
Albert
01-28 925
function star(e){ var obj=document.createElement("img"); obj.src="xx.gif"; document.body.appendChild(obj); var w=Math.floor(Math.random()*80+20); obj.width=w; var X=e.clientX; var Y=e.c
使用Canvas+JavaScript FileAPI实现图片剪切与滤镜功能
- CSS和JavaScript结合用于实现选择框的拖动和缩放效果，以及Canvas的边界检测，确保图片不会超出画布范围。 - 添加适当的事件监听器，例如`addEventListener()`，以响应用户的操作。 7. **兼容性考虑** - 考虑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值