Question

所以我正在玩HTML和JavaScript，我正在尝试使用Canvas元素所以我制作了一个简单的strokeRect作为一个按钮我想这样做，以便当我将鼠标悬停在它上面时改变strokeRect颜色我该怎么办？这是我的HTML代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>UNNAMED</title>
</head>
<body>
<canvas id="secret" width="360px" height="30px"></canvas>
<canvas id="drawing" onClick="secret()" width="102px" height="42px">Your browser doesn't support the canvas element</canvas>
<script src="jsfil.js" type="text/javascript"></script>
</body>
</html>

这是我的JavaScript代码

var cSecret = document.getElementById("secret").getContext("2d");
var cRect = document.getElementById("drawing").getContext("2d");
var cText = document.getElementById("drawing").getContext("2d");
cText.font="18px Times New Roman";
cText.fillText("Click me",18,26);
cRect.strokeStyle = "#FF0000";
cRect.strokeRect(1, 1 , 100, 40);
var secretFound = false;
function secret() {
if(secretFound == false)
{
    secretFound = true;
    cSecret.font="24px Times New Roman";
    cSecret.fillText("Congratulations, you found a secret",1,20);
   }    
}

这是我的css代码

#copyright{
position: absolute;
top: 92%;   
}
#drawing{
position: absolute;
top: 50px;
left: 50px;
border: 1px;
border-style: solid;
border-color: blue; 
}
#drawing:hover{
position: absolute;
top: 50px;
left:   50px;
border: 1px;
border-style: solid;
border-color: red;
}
#secret{
    position: absolute;
}

当我将鼠标悬停在矩形上时，我想更改strokeStyle 我尝试过使用CSS，但只创建了一个新的边框我想到的一种方法是检查光标位置
如果光标在这个区域，它会改变颜色，但感觉应该有一个更简单的方法。

Answer 1

Canvas不能那样工作。如果你想改变一些东西，你必须重绘。您可以查看SVG，它允许使用Css修改内容。

在悬停时更改strokeRect颜色

1 个答案: