HTML5入门九---Canvas画布

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            canvas{

                border: 1px dashed black;

            }

        </style>

        <script>

            window.onload = function(){

                var canvas = document.getElementById("myCanvas");

                var context = canvas.getContext("2d");

                context.translate(100,100);//平移

                var cop = 10;//试着减小或增大cop的值观察图案变化

                for(var i = 1; i<cop; i++){

                    context.rotate(2*Math.PI*1/(cop-1));//旋转

                    context.rect(0,0,60,60);//画矩形

                }

                context.strokeStyle = "red";

                context.stroke();        

            }

        </script>

    </head>

    <body>

        <canvas id="myCanvas" width="300" height="200">

        </canvas>

    </body>

</html>
巴特西

HTML5入门九---Canvas画布

最新文章

热门文章
