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>

posted on 2015-12-23 09:10 让编程成为一种习惯阅读(242) 评论(0) 收藏举报