我正在尝试使用 html5 和 javascript 开发一个简单的 Canvas 应用程序。我想根据鼠标在 Canvas 上单击的位置制作一个圆圈。每次用户在 Canvas 中单击时，都应绘制一个圆圈。此外，圆圈的颜色需要随机选择。我编写了随机颜色和位置函数来获取鼠标在 Canvas 中的 x 和 y 位置。但是当我运行时什么也没有发生。
这是我的 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="circle.js"></script>
<style type="text/css">
#testCanvas {
border: 2px solid;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="400" height="400"> </canvas>
</body>
这是我的 JavaScript 代码:
window.onload = init;
function init() {
// access the canvas element and its context
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = randomColor();
// fill a circle
context.beginPath();
context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
}
function randomColor() {
var color = [];
for (var i = 0; i < 3; i++) {
color.push(Math.floor(Math.random() * 256));
}
return 'rgb(' + color.join(',') + ')';
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
最佳答案
您需要为 Canvas 实现一个单击处理程序，以便每次单击它时您都会收到事件形式的通知:
// access the canvas element and its context
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
// add click handler
canvas.onclick = function(e) {
var pos = getMousePos(canvas, e); // get position as before
context.fillStyle = randomColor(); // get the fill color
// fill a circle
context.beginPath(); // now we can draw the circle at click
context.arc(pos.x, pos.y, 30, 0, 2 * Math.PI); // use pos object directly like this
context.fill();
// closePath() not needed here and won't work after fill() has been called anyways
}
function randomColor() {
var color = [];
for (var i = 0; i < 3; i++) {
color.push(Math.floor(Math.random() * 256));
}
return 'rgb(' + color.join(',') + ')';
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}canvas {border: 1px solid #999}<canvas id="testCanvas" width="400" height="400"> </canvas>关于javascript - 单击鼠标在 Canvas 上用随机颜色绘制一个圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46492528/