大佬教程收集整理的这篇文章主要介绍了jquery – 悬停以改变画布的颜色,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了5个画布圈.当我将鼠标悬停在任何圆圈上时,我只需更改画布颜色,当悬停在圆圈上时,我在画布上添加了一个类但是可以仅更改颜色.我不想再次创建画布时只更改悬停时的颜色.
$(document).ready(function(){ $('.menuballs').hover(function () { $(".menuballs").children('canvas').toggleClass('hover-intro'); if($(this).is(':hover')) { var c = document.getElementsByClassName("hover-intro"); var graphics = c.getContext( '2d' ); graphics.fillStyle = 'green'; graphics.fill(); } }); });
尝试使用hover-intro类,但是给定HTMLElement,我需要CanvaSELER_600_11845@ent来填充圆圈.
在html画布上绘制的圆圈不是DOM元素.相反,它们就像画布上被遗忘的画像一样.
这些是将悬停效果应用于您的圈子的步骤
>在javascript对象中跟踪圆圈的定义(x,y,半径等).
>听取鼠标移动事件并测试鼠标是否在您的圈内
>当鼠标进入或离开您的圆圈时,重绘您的圆圈
这些步骤可能在代码中看起来如何:
演示:http://jsfiddle.net/m1erickson/rV9cZ/
在javascript对象中跟踪圆圈的定义(x,半径等).
var myCircle={ x:150,y:150,radius:25,rr:25*25,// radius squared hovercolor:"red",blurcolor:"green",isHovering:false }
收听mousemove事件并测试鼠标是否在您的圈子内
function handleMouseMove(E){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); var dx=mouseX-myCircle.x; var dy=mouseY-myCircle.y; // math to test if mouse is inside circle if(dx*dx+dy*dy<myCircle.rr){ // change to hovercolor if prevIoUsly outside if(!myCircle.isHovering){ myCircle.isHovering=true; drawCircle(myCirclE); } }else{ // change to blurcolor if prevIoUsly inside if(myCircle.isHovering){ myCircle.isHovering=false; drawCircle(myCirclE); } } }
当鼠标进入或离开您的圆圈时,重绘您的圆圈
function drawCircle(circlE){ ctx.beginPath(); ctx.arc(circle.x,circle.y,circle.radius,Math.PI*2); ctx.closePath(); ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor; ctx.fill(); }
以上是大佬教程为你收集整理的jquery – 悬停以改变画布的颜色全部内容,希望文章能够帮你解决jquery – 悬停以改变画布的颜色所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。