读HTML5应用开发与实践【四】【坐标变换】

最新推荐文章于 2024-07-19 11:00:40 发布

sa酱

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/lx583274568/article/details/45289749

版权

<!Doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html";charset="utf-8">
        <title>canvas</title>
        <script language=javascript>
            function draw()
            {
                var canvas=document.getElementById('1');
                var context=canvas.getContext('2d');

                context.fillStyle="#0f0";//绿色
                //context.fillRect(0,0,400,300);
                //图形绘制
                 context.translate(200,50);
                
                context.fillStyle='rgba(255,0,0,0.75)';
               for(var i=0;i<1000;i++)
                {
                    context.translate( 5,5);
                    context.scale(0.95,0.95);
                    context.rotate(Math.PI/25);
                    context.fillRect(i*5+300,i+100,100-2*i,50-i);
                }
            }
        </script>
    </head>
    <body>
        <canvas id="1" style="border: 1px solid skyblue" width="800" height="600">恩？
            <script>
                draw();
            </script>
        </canvas>
    </body>
</html>