懸停時更改strokeRect顏色
[英]changing strokeRect colour on hover
問題描述
所以我在玩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，但這只會創建一個新的邊框。
我想到的一種方法是檢查光標位置
如果光標位於該區域，它將改變顏色，但感覺應該有一種更簡單的方法。
1 個解決方案
解決方案1
0 已采納 2016-01-05 01:21:48
畫布不能那樣工作。 如果要更改某些內容，則必須重新繪制。 您可以看一下SVG，它允許使用CSS修改內容。
在懸停AngularJS上更改元素顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.