老师 您好 帮我看看效果吧

来源:4-5 编程练习

小虾虾小

2019-11-07 09:05:09

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvasL4-5</title>

    <style>

        canvas{background-color:lightblue;}

    </style>

</head>

<body>

    <canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>

    <script>

    // 在此处写出代码

    var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d');

    ctx.translate(200,300);

    ctx.rotate(Math.PI / 3);

    ctx.scale(.5,.5);

        ctx.fillStyle = 'yellow';

    ctx.fillRect(100,100,200,300);

    </script>

</body>

</html>


写回答

1回答

好帮手慕码

2019-11-07

同学你好!

看来掌握了知识点,但是原点在(100,100)的位置,translate是移动的距离,所以要移动(100,200)才能到200,300的位置,修改如下:

http://img.mukewang.com/climg/5dc384c2094a399903210060.jpg

效果:

http://img.mukewang.com/climg/5dc384bf0908376306110618.jpg

如果帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 6815 问题

查看课程