为什么当我添加值时我的对象不改变位置

Question

<hmtl>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
}
}
var sqr=new shape(100,100)
sqr.x+=100
</script>
</body>
</hmtl>

为什么我给 x 加上 100 并希望它的位置是 (200,100) 但是当我打开实时服务器时它的位置仍然是 (100,100)

Answer 1

因为它只会改变 x 的值，所以你必须在 canvas 上再次绘制它并且在再次绘制之前我们必须使用 clearRect[= 清除 canvas 20=]

<html> <head>  </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); this.draw = ()=>{ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FF0000"; ctx.fillRect( this.x, this.y, 50, 50); ctx.stroke(); } } var sqr=new shape(100,100) sqr.draw(); sqr.x+=-100 sqr.draw(); </script> </body> </html>

为什么当我添加值时我的对象不改变位置

why my object don't change position when i add value

javascript

html

css

canvas