如何使用HTML5和CSS3创建画布框悬停效果

Question

我正在尝试使用HTML5＆amp; amp;来开发一个帆布盒悬停效果。 CSS3，但我不能让它工作。我想产生如下所示的效果：

当用户没有悬停时
• http://i.stack.imgur.com/7QkiZ.jpg
用户悬停时
• http://i.stack.imgur.com/4zRWi.jpg

即。当用户使用HTML5画布将鼠标悬停在蓝色方块上时，如何制作蓝色三角形并将其变为蓝色方块？

Answer 1

在这里：https://jsfiddle.net/7g7tyn2c/

说明：

• 一旦我们使用document.getElementById("canvasid").getContext("2d");得到它的上下文，我们就可以在画布上绘制。我们想要绘制时引用这个上下文（我们存储在变量ctx中），因为所有的绘图函数都存储了那里。
• 我们也知道我们只会用蓝色绘图，所以我们在做其他任何事情之前设置填充颜色ctx.fillStyle="blue"。如果您想要不同的颜色，可以使用HEX代码，如下所示：ctx.fillStyle="#0000ff";
• 两个不同的功能：一个绘制蓝色三角形（这是正常状态），另一个绘制蓝色矩形（悬停状态）。这些由canvas元素上的onmouseover和onmouseout事件调用。在页面加载时也会调​​用普通函数。
• 在正常状态下，我们首先使用ctx.moveTo(0,0,256,256);
告诉画布从右下角开始
• 然后我们可以使用当前位置的ctx.lineTo(x,y)绘制路径。这类似于Illustrator中的vector pen tool
• 要在悬停时使整个事物变为蓝色（对于悬停功能），我们使用ctx.rect(0,0,256,256)绘制一个覆盖整个区域的蓝色矩形。
• 如果我们没有删除此onmouseout，那么我们将在广场顶部绘制一个蓝色三角形，它将保持全蓝色。为避免这种情况，我们使用ctx.clearRect(0,0,256,256)删除所有画布内容并重新开始。这是在正常功能中运行。

Answer 2

真的？只需使用:hover选择器。

canvas:hover {

canvas:hover {
  background: gold;
}

<canvas id="my-canvas" height="300" width="300"></canvas>