悬停以改变画布的颜色 [英] Hover to change color of canvas
问题描述
我是新的在画布上任何人都可以帮助缩短这个问题。
我创建了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,我需要CanvasElement填充圆。
您的:悬停将永远不会被触发。
在html画布上绘制的圆圈不是DOM元素。
这些是将悬停效果应用到您的圈子的步骤
-
在JavaScript物件中追踪您的社交圈定义(x,y,半径等)。
-
当鼠标进入或离开您的圈子时,请重画您的圈子
/ li>
这些步骤可能会在代码中显示:
演示: a href =http://jsfiddle.net/m1erickson/rV9cZ/> http://jsfiddle.net/m1erickson/rV9cZ/
strong>在JavaScript对象中跟踪您的圈子的定义(x,y和半径等)。
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;
//测试鼠标在圆圈内的数学
if(dx * dx + dy * dy
//改为hovercolor如果以前在外面
if(!myCircle.isHovering){
myCircle.isHovering = true;
drawCircle(myCircle);
}
} else {
//如果之前在
中,则改为blurcolor if(myCircle.isHovering){
myCircle.isHovering = false;
drawCircle(myCircle);
}
}
}
当鼠标进入或离开您的圈子时,重画您的圈子
function drawCircle b ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI * 2);
ctx.closePath();
ctx.fillStyle = circle.isHovering?circle.hovercolor:circle.blurcolor;
ctx.fill();
}
I am new in canvas can anyone please help to short this issue.
I create 5 canvas circle. When I hover on any circle I need to change canvas color only, when hover on circle I added one class on canvas but is it possible to change only color. I don't want to create canvas again change only color when hover.
$(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();
}
});
});
Try this as taking hover-intro class but its given HTMLElement, and I need CanvasElement to fill in circle.
Your :hover will never be triggered.
Circles drawn on html canvas are not DOM elements. Instead they are like forgotten painted pixels on a canvas.
These are the steps to apply a hover-effect to your circle
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
Listen for mousemove events and test if the mouse is inside your circle
When the mouse enters or leaves your circle, redraw your circle
This is how those steps might look in code:
Demo: http://jsfiddle.net/m1erickson/rV9cZ/
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
var myCircle={
x:150,
y:150,
radius:25,
rr:25*25, // radius squared
hovercolor:"red",
blurcolor:"green",
isHovering:false
}
Listen for mousemove events and test if the mouse is inside your circle
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);
}
}
}
When the mouse enters or leaves your circle, redraw your circle
function drawCircle(circle){
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor;
ctx.fill();
}
这篇关于悬停以改变画布的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!