麻烦老师检查，谢谢

 // 获取元素
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        //圆点平移
        ctx.translate(200,300);

        //旋转变换
        ctx.rotate(Math.PI/4);

        //scale 缩放变换
        ctx.scale(0.5, 0.5);
        
       
        //原点在（100，100）宽200，高300的黄色矩形
        // ctx.strokeRect(100, 100, 200, 300);  //去掉边框
        ctx.fillStyle = '#ffd700';
        ctx.fillRect(100, 100, 200, 300);

qq_慕移动3101913 2020-02-28

源自：HTML5 Canvas绘图基础 4-5 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2020-02-28 13:56:42

同学你好，代码中问题如下：

1、原点在（100，100）的位置，translate是移动的距离，所以要移动（100,200）才能到200,300的位置

2、对绘制的图形进行60度的旋转，是Math.PI/3

如下修改：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

qq_慕移动3101913 提问者 #1

老师，是这样理解的吗 1、图像的圆点通过平移的方法显示在（200，300）处，这句话是：把画好的圆形，平移（200，300），不是先平移再画圆。所以，画好的圆点（X轴100,Y轴100），X轴想达到平移200,100到200相差100，Y轴想达到平移300,100到300相差200，所以ctx.translate(100,200);是吗，谢谢

2020-02-28 14:56:23
好帮手慕星星回复提问者 qq_慕移动3101913 #2

这样理解也是可以的哦。

2020-02-28 19:51:58
qq_慕移动3101913 提问者回复好帮手慕星星 #3

谢谢老师。

2020-03-02 13:01:50