英文:
Create canvas element when clicking on one element then click on that element
问题
I click on the green circle to create a canvas element, a yellow circle, but when I create the isPointinPath variable with the if-statement, I get an error. I want to create a new element once I click on the green circle, and I want to be able to click on that new element. So far, I can only create it. How do I make it clickable? Are there other approaches to this?
<!DOCTYPE html>
<canvas id="canvas" style="border: solid 5px blue";></canvas>
//declare canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;
function circle_factory(circle_var, x, y, start, end, color) {
circle_var = new Path2D()
circle_var.arc(x, y, 50, start, end * Math.PI);
ctx.fillStyle = color;
circle_var.closePath
ctx.fill(circle_var);
}
//circle 2
var circle2 = new Path2D();
circle2.arc(250, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "green";
circle2.closePath
ctx.fill(circle2);
var circle_1 = new circle_factory(circle_1, 510, 75, 0, 2, 'orange')
canvas.addEventListener('click', (event) => {
circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY)
if (circle_2_click) {
var circle_yellow = new circle_factory(circle_yellow, 640, 75, 0, 2, 'yellow')
var circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY)
if (circle_yellow_click) {console.log('it works')}
}
})
英文:
I click on the green circle to create a canvas element, a yellow circle, but when I create the isPointinPath variable with the if-statement, I get an error. I want to create a new element once a I click on the green circle and I want to be able to click on that new element. So far, I can only create it. How do I make it clickable? Are there other approaches to this?
\
<!DOCTYPE html\>
<canvas id ="canvas" style="border: solid 5px blue";\>\</canvas\>
//declare canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;
function circle_factory(circle_var, x, y, start, end, color) {
circle_var = new Path2D()
circle_var.arc(x, y, 50, start, end \* Math.PI);
ctx.fillStyle = color;
circle_var.closePath
ctx.fill(circle_var);
}
//circle 2
var circle2 = new Path2D();
circle2.arc(250, 75, 50, 0, 2 \* Math.PI);
ctx.fillStyle = "green";
circle2.closePath
ctx.fill(circle2);
var circle_1 = new circle_factory(circle_1, 510, 75, 0, 2, 'orange')
canvas.addEventListener('click', (event) =\> {
circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY)
if (circle_2_click) {
var circle_yellow = new circle_factory(circle_yellow, 640, 75, 0, 2, 'yellow')
var circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY)
if (circle_yellow_click) {console.log('it works')}
}
})
答案1
得分: 0
你的代码问题在于你试图将circle_yellow变量作为第一个参数传递给circle_factory函数，但是在那个时候circle_yellow还没有定义，所以它将是undefined。
一种解决方法是从circle_factory函数中移除第一个参数，并让它返回创建的Path2D对象。然后，你可以将返回的值分配给circle_yellow变量。
<canvas id="canvas" style="border: solid 5px blue"></canvas>
<script>
// 声明 canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;
function circle_factory(x, y, start, end, color) {
const circle_var = new Path2D();
circle_var.arc(x, y, 50, start, end * Math.PI);
ctx.fillStyle = color;
circle_var.closePath();
ctx.fill(circle_var);
return circle_var;
}
// 圆形 2
const circle2 = circle_factory(250, 75, 0, 2, "green");
const circle_1 = circle_factory(510, 75, 0, 2, "orange");
canvas.addEventListener("click", (event) => {
const circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY);
if (circle_2_click) {
const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");
const circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY);
if (circle_yellow_click) {
console.log("it works");
}
}
});
</script>
为了使新的圆形可点击，你可以为canvas元素添加另一个事件监听器，检查点击是否在新圆形的路径内：
canvas.addEventListener("click", (event) => {
const circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY);
if (circle_2_click) {
const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");
canvas.addEventListener("click", (event) => {
const circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY);
if (circle_yellow_click) {
console.log("it works");
}
});
}
});
英文:
The issue with your code is that you are trying to pass the circle_yellow variable into the circle_factory function as the first argument. However, circle_yellow is not yet defined at that point, so it will be undefined.
One solution is to remove the first argument from the circle_factory function and have it return the created Path2D object. Then, you can assign the returned value to the circle_yellow variable.
<canvas id="canvas" style="border: solid 5px blue"></canvas>
<script>
//declare canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;
function circle_factory(x, y, start, end, color) {
const circle_var = new Path2D();
circle_var.arc(x, y, 50, start, end * Math.PI);
ctx.fillStyle = color;
circle_var.closePath();
ctx.fill(circle_var);
return circle_var;
}
//circle 2
const circle2 = circle_factory(250, 75, 0, 2, "green");
const circle_1 = circle_factory(510, 75, 0, 2, "orange");
canvas.addEventListener("click", (event) => {
const circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY);
if (circle_2_click) {
const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");
const circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY);
if (circle_yellow_click) {
console.log("it works");
}
}
});
</script>
To make the new circle clickable, you can add another event listener for the canvas element that checks if the click is inside the new circle's path:
canvas.addEventListener("click", (event) => {
const circle_2_click = ctx.isPointInPath(circle2, event.offsetX,
event.offsetY);
if (circle_2_click) {
const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");
canvas.addEventListener("click", (event) => {
const circle_yellow_click = ctx.isPointInPath(circle_yellow,
event.offsetX, event.offsetY);
if (circle_yellow_click) {
console.log("it works");
}
});
}});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论