下面列出了圆形的例子
这是我的 JavaScript 代码。
<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>
最佳答案
假设您的 randomColor
是正确的,您只需要:
- 从 canvas.onclick 中移除
context.clearRect
- 将
context.beginPath
移动到 canvas.onclick
这是一个工作示例
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
function randomColor() {
colorArray = ["red", "blue", "green", "lime", "orange", "cyan"]
return colorArray[Math.floor(Math.random() * colorArray.length)];
}
// click event handler
canvas.onclick = function(e) {
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;
context.beginPath();
context.fillStyle = randomColor();
context.arc(x, y, 25, 0, 2 * Math.PI, true);
context.fill();
}
<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>
关于HTML5 Canvas - 绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52248192/