我正在练习 JavaScript 和 HTML，所以请和我一起学习。
我下面的代码应该在页面加载时创建弹出消息和 Canvas (矩形)。当我点击 Canvas 时，它会绘制一个红色圆圈，当双击 Canvas (矩形)时，圆圈变为红色。
由于某些原因，在 Canvas 上单击时不会绘制红色圆圈。你能帮我解决这个问题并告诉我如何实现变色功能吗？
感谢您的任何意见。
<!DOCTYPE html>
<html>
<style type="text/css">
canvas {border: 1px solid #000;}
</style>
<script type="text/javascript">
// popup message when page loads
function popUpMessage() {
alert("Please click left top corner");
}
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
// click canvas
function clickCanvas(imageId) {
canvas.style.display = "block";
document.getElementById("images").style.overflowY = "hidden";
var img = new Image(400, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}
// draw red circle on click
function drawCircle(e) {
posx = 100;
posy = 100;
context.fillStyle = "#FF0000";
context.beginPath();
context.arc(posx, posy, 100, 0, 2*Math.PI);
context.fill();
}
// change from red to blue on double click
function changeColor() {
}
window.drawCircle = drawCircle;
</script>
<body onload="popUpMessage()">
<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)"></canvas>
</body>
</html>
更新了具有单击和双击功能的代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {border: 1px solid #000;}
</style>
</head>
<body onload="popUpMessage()">
<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)" ondblclick="changeColor(event)"></canvas>
<script type="text/javascript">
// popup message when page loads
function popUpMessage() {
alert("Please click left top corner");
}
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var timer;
var status = 1;
// click canvas
function clickCanvas(imageId) {
canvas.style.display = "block";
document.getElementById("images").style.overflowY = "hidden";
var img = new Image(400, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}
// draw red circle on click
function drawCircle(e) {
status = 1;
timer = setTimeout(function() {
if (status == 1) {
posx = 100;
posy = 100;
context.fillStyle = "#FF0000";
context.beginPath();
context.arc(posx, posy, 100, 0, 2 * Math.PI);
context.fill();
}
}, 5);
}
// change from red to blue on double click
function changeColor(event) {
clearTimeout(timer);
status = 0;
popUpMessage();
}
window.drawCircle = drawCircle;
</script>
</body>
</html>
最佳答案
您的代码在 jsfiddle 上运行良好当 JavaScript 包含在 <body> 中时
- 您的代码没有
<head>标签。将您的CSS里面<head>标签。 - 将您的 JavaScript 移动到
<body>的末尾标签。
这是您完美运行的代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {border: 1px solid #000;}
</style>
<link rel="stylesheet" href="stylespacewars.css" />
<script src="jsspacewars.js"></script>
<script src="jquery.js"></script>
<title></title>
</head>
<body onload="popUpMessage()">
<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)" ondblclick="changeColor(event)"></canvas>
<script type="text/javascript">
// popup message when page loads
function popUpMessage() {
alert("Please click left top corner");
}
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
// click canvas
function clickCanvas(imageId) {
canvas.style.display = "block";
document.getElementById("images").style.overflowY = "hidden";
var img = new Image(400, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}
// draw red circle on click
function drawCircle(e) {
posx = 100;
posy = 100;
context.fillStyle = "#FF0000";
context.beginPath();
context.arc(posx, posy, 100, 0, 2 * Math.PI);
context.fill();
}
// change from red to blue on double click
function changeColor() {
posx = 100;
posy = 100;
context.fillStyle = "#0000FF";
context.beginPath();
context.arc(posx, posy, 100, 0, 2 * Math.PI);
context.fill();
}
window.drawCircle = drawCircle;
</script>
</body>
</html>
关于JavaScript - 在 Canvas 上画圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31370313/