鼠标悬停时重新绘制画布

Redraw canvas on mouseover

本文关键字：绘制 悬停 新绘制 鼠标      更新时间：2023-09-26

我已经打开了一个关于我在这里创建的画布的问题，但有一个不同的问题：用画布制作矩形覆盖图像

我想知道是否可以在鼠标悬停上设置拱门半径的动画？这是我的：jsfiddle

// Options
var maxImageWidth = 250,
    maxImageHeight = 196,
    radius = 50;
var canvas = $('#ddayCanvas'),
    canvasWidth = canvas.width(),
    canvasHeight = canvas.height(),
    sectorColor = $('.product-box').css('background-color'),
    context = canvas[0].getContext('2d'),
    imageSrc = canvas.data('image');  

function drawDday (option) {
    context.clearRect(0, 0, canvasWidth, canvasHeight);         
    if (typeof option != 'undefined'){
        radius = option;
    }    
    var imageObj = new Image();
    imageObj.onload = function() {
        var imageWidth = imageObj.width,
            imageHeight = imageObj.height;
        if (imageWidth > maxImageWidth){
            imageHeight = imageHeight - (imageWidth - maxImageWidth);
            imageWidth = maxImageWidth;
        }
        if (imageHeight > maxImageHeight) {
            imageWidth = imageWidth - (imageHeight - maxImageHeight);
            imageHeight = maxImageHeight;
        }
        context.drawImage(imageObj, Math.ceil((canvasWidth - imageWidth) / 2), Math.ceil((canvasHeight - imageHeight) / 2), imageWidth, imageHeight);
        // Why does this rectangle not overlay the previous image?
        context.fillStyle = sectorColor;
        context.rect(0, 0, canvasWidth, canvasHeight);
        context.arc(canvasWidth/2, canvasHeight/2, radius, 0, Math.PI*2, true);
        context.fill();
    };

    imageObj.src = imageSrc;  
}
drawDday(); 
canvas.hover(function(){
    drawDday(90);
}, function(){
    drawDday(20);
});

我试着用悬停时半径的参数调用函数，并用clearRect"覆盖"画布。但不幸的是，它只给了我一个轻弹的效果。。。

编辑

我刚刚意识到，当初始半径大于悬停半径时，鼠标悬停/退出会起作用。很奇怪。。。

每次drawDday调用都会重新加载图像。这将导致闪烁效果。尝试加载一次图像，然后重复使用imageObj引用绘制到画布上。

imageObj加载一次，并在每次drawDday调用中重复使用。请参阅：http://jsfiddle.net/Vr5k9/4/

function drawDday (radius) {
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    context.drawImage(imageObj, Math.ceil((canvasWidth - imageWidth) / 2), Math.ceil((canvasHeight - imageHeight) / 2), imageWidth, imageHeight);
    context.fillStyle = sectorColor;
    context.beginPath();
    context.rect(0, 0, canvasWidth, canvasHeight);
    context.arc(canvasWidth/2, canvasHeight/2, radius, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
}

编辑：请注意context.beginPath（）和context.closePath（）。这让画布子系统知道每次调用函数都是一个新路径。否则，新路径将与旧路径合并。

编辑：鼠标移动时具有简单的动画效果：http://jsfiddle.net/CvuyN/2/

相关文章：