Javascript 如何翻译并使画布具有响应性？

我试图移动画布以将其转换为

（100100）

，但它没有移动

• 画布没有响应，当我尝试使用CSS更改画布的大小时，圆圈正在缩小

• 如何添加按钮以按圆圈切换画布上的绘图（即：当按下按钮

  不绘制

  时，圆圈不应在画布上绘制，当按下按钮

  绘制

  时，圆圈应绘制）

requestAnimationFrame（动画）；
var ctx=canvas1.getContext（'2d'）；
ctx.translate（100100）；
画布1.width=内部宽度；
canvas1.height=内部高度；
const bgCan=copyCanvas（canvas1）；
常数redSize=6，蓝色大小=5；//基于像素的圆圈大小
常数drawSpeed=1；//按下按钮时，以每帧像素为单位绘制速度
变量X=50，Y=50；
var角=0；
var mouseButtonDown=false；
document.addEventListener（'mousedown'，（）=>mouseButtonDown=true）；
document.addEventListener（'mouseup'，（）=>mouseButtonDown=false）；
函数copyCanvas（画布）{
const can=Object.assign（document.createElement（“canvas”）{
宽度：canvas.width，高度：canvas.height
});
can.ctx=can.getContext（“2d”）；
还可以；
}
功能圈（ctx）{
ctx.fillStyle='黑色'；
ctx.beginPath（）；
弧（X，Y，redSize，0，数学PI*2）；
ctx.fill（）；
}
功能方向（ctx）{
常数d=蓝色大小+红色大小+3；
ctx.fillStyle='蓝色'；
ctx.beginPath（）；
弧（d*Math.sin（角度）+X，d*Math.cos（角度）+Y，蓝色，0，Math.PI*2）；
ctx.fill（）；
}
函数animate（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.drawImage（bgCan，0,0）；
如果（鼠标按钮）{
圆圈（bgCan.ctx）；
X+=数学正弦（角度）*牵引速度；
Y+=数学cos（角度）*牵引速度；
}否则{
角度+=0.1；
圆圈（ctx）；
}
方向（ctx）；
请求动画帧（动画）；
}

#游说1{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框宽度：1px；
边框样式：实心；
边框颜色：黑色；
}

帆布基础

translate（100100）

被画布的新宽度/高度重置。只需在设置宽度/高度后执行

最简单的方法是使用窗口调整侦听器并更新画布样式的宽度/高度

我不知道为什么，但出于某种原因，canvas的

z-index

更高，因此按钮的

onclick（）

从未触发

在下面的代码中，我添加了边界限制，它受

translate（100100）

的影响

requestAnimationFrame（动画）；
var ctx=canvas1.getContext（'2d'）；
画布1.width=内部宽度；
canvas1.height=内部高度；
ctx.translate（100100）；
const bgCan=copyCanvas（canvas1）；
常数redSize=6，
blueSize=5；//基于像素的圆圈大小
常数drawSpeed=1；//按下按钮时，以每帧像素为单位绘制速度
const drawButton=document.getElementById（“mybutton1”）；
var-draw=true；
var X=50，
Y=50；
var角=0；
var mouseButtonDown=false；
document.addEventListener（'mousedown'，onMouseEvent）；
document.addEventListener（'mouseup'，onMouseEvent）；
函数copyCanvas（画布）{
const can=Object.assign（document.createElement（“canvas”）{
宽度：canvas.width，
高度：canvas.height
});
can.ctx=can.getContext（“2d”）；
还可以；
}
功能圈（ctx，鼠标向下）{
如果（鼠标向下&&！绘制）
返回；
ctx.fillStyle='黑色'；
ctx.beginPath（）；
弧（X，Y，redSize，0，Math.PI*2）；
ctx.fill（）；
}
功能方向（ctx）{
常数d=蓝色大小+红色大小+3；
ctx.fillStyle=绘制“蓝色”：“红色”；
ctx.beginPath（）；
弧（d*Math.sin（角度）+X，d*Math.cos（角度）+Y，蓝色，0，Math.PI*2）；
ctx.fill（）；
}
函数animate（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.drawImage（bgCan，0,0）；
如果（鼠标按钮）{
圆圈（bgCan.ctx，鼠标按钮）；
常数x=x+数学sin（角度）*牵引速度，
y=y+数学cos（角度）*牵引速度；
如果（x>（蓝色大小+红色大小）*2和&x（蓝色尺寸+红色尺寸）*2和&ywindow.innerWidth）{
w=窗宽；
h=w/比；
}
canvas1.style.width=w+'px'；
canvas1.style.height=h+'px'；
};
handleResize（）；//第一次抽签

#游说1{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框宽度：1px；
边框样式：实心；
边框颜色：黑色；
z索引：-1；/*让其他元素接收事件*/
}

帆布基础

我认为你应该编辑这个问题，因为它不是很清楚。我不能完全理解你的问题，我怀疑其他人会。