如何在悬停时重新调整画布 [英] How Do I Readjust A Canvas On Hover

问题描述

我动态制作画布如下：

i dynamically made a canvas as so:

function pageSetup() {
            var vDuration = 30;
            var vHeight = 280;
            var canvas = document.createElement('canvas');
                        canvas.id = "canvas0";
            canvas.width  = 60;
            canvas.height = vHeight;
            canvas.style.position = "absolute";

            for(var canCount = 0; canCount < vDuration; canCount++)
                        {
                                var ctx=canvas.getContext("2d");
                ctx.stroke();
                ctx.fillStyle="#FF0000";
                var topX = 0;
                var topY = canCount*(vHeight/vDuration);
                var botX = 40;
                var botY = topX + (vHeight/vDuration);
                ctx.fillRect(topX, topY, botX, botY);

                        }

它使画布高280像素，宽30宽。在其中，从顶部到底部以垂直堆叠绘制30个矩形。每个宽度为40.然而，总画布宽度为60.



我现在想要的是当用户将鼠标悬停在其中一个矩形上时（或者更确切地说）它们重新绘制了一个60像素宽的新像素，而不是鼠标所在的40像素。由于某些原因，以下不会起作用：

It makes a canvas 280 pixels high and 30 wide. Within it, 30 rectangles are drawn in a vertical stack from top to bottom. Each has a width of 40. The total canvas width it 60 however.

What I want now is when the user hovers over one of these rectangles it expands (or rather theyre redrawn with a new one 60 pixels wide instead of 40 where the mouse is. For some reason the following wont work:

$(document).on("mouseover", "#canvas", function(e) {

              var ctx = $("#canvas0")[0].getContext('2d');
              ctx.fillStyle="#000000";
              ctx.fillRect(0,0,30,30 );

});

如果我能得到它画一个用户悬停的矩形然后我可以调整它绘制新的额外长度矩形的位置



也尝试：

if i can get it to draw a rectangle on a user hover then i can just adjust where it draws the new extra length rectangle

Tried also:

$('#myCanvas').mousemove(function (e) {
    // Event location offset - the offset of the element = offset within layer
    var context = document.getElementById("canvasId").getContext("2d");
    context.clearRect(0,0,context..canvas.width,context.canvas.height);
    context.fillStyle="#000000";
    context.fillRect(0,0,50,50);

});

推荐答案

（document）.on（ mouseover， ＃canvas ，function（e）{

var ctx =

(document).on("mouseover", "#canvas", function(e) { var ctx =

（ ＃canvas0）[ 0 ]。getContext （' 2d'）;
ctx.fillStyle = ＃000000;
ctx.fillRect（ 0 ，< span class =code-digit> 0 ， 30 ， 30 ）;

}）;

("#canvas0")[0].getContext('2d'); ctx.fillStyle="#000000"; ctx.fillRect(0,0,30,30 ); });

如果我可以让它画一个矩形用户悬停然后我可以调整它绘制新额外len的位置gth矩形



也试过：

if i can get it to draw a rectangle on a user hover then i can just adjust where it draws the new extra length rectangle

Tried also:

（' ＃myCanvas'）。mousemove（function（e）{
// 事件位置偏移量 - 元素的偏移量=图层内的偏移量
< span class =code-keyword> var context = document.getElementById（ canvasId）。getContext（ 2d）;
context.clearRect（ 0 ， 0 ，context..canvas.width，context.canvas 。高度）;
context.fillStyle = ＃000000;
context.fillRect（ 0 ， 0 ， 50 ， 50 ）;

}）;

('#myCanvas').mousemove(function (e) { // Event location offset - the offset of the element = offset within layer var context = document.getElementById("canvasId").getContext("2d"); context.clearRect(0,0,context..canvas.width,context.canvas.height); context.fillStyle="#000000"; context.fillRect(0,0,50,50); });

这篇关于如何在悬停时重新调整画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！