老师，我的问题是关于tanslate。

来源：4-3 Canvas图形变换之旋转和缩放

慕斯0469344

2019-09-08 17:09:48

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
.canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas class="canvas" id="myCanvas" width="600px" height="400px">
您的浏览器不支持canvas，
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();

ctx.translate(0,100);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
// 旋转
ctx.rotate(Math.PI/4);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineWidth = 5;
ctx.strokeStyle = '#f00';
ctx.stroke();


ctx.scale(1,0.5);
ctx.fillRect(0,-100,100,100);


</script>
</body>
</html>

老师，您看这段代码，translate影响力第一个beginPath后面的moveTo，这我理解，但是有结果可知，translate貌似也影响了第二个beginPath后面的moveTo，老师，这是怎么回事呢？

写回答

1回答