changing strokeRect colour on hover
Question
so i'm playing around with HTML and JavaScript and i'm trying out the Canvas element.
so I made a simple strokeRect that acts as a button.
I want to make it so it changes the strokeRect colour when i hover over it
how would i do this? Here is my HTML code
<!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>
and here is my JavaScript code
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);
}
}
And here is my css code
#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;
}
I want to change the strokeStyle when I hover over the rectangle.
i've tried using CSS but that only creates a new border.
One way I thought of doing it is checking the cursor position
if the cursor is in this area it would change colour but it feels like there should be an easier way.
1 answers
solution1
0 ACCPTED 2016-01-05 01:21:48
Canvas does not work like that. If you want to change something, you have to redraw. You can take a look at SVG, that allows to modify things with Css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.