提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML5入门九---Canvas画布

html5入门 --- Canvas 画布
2023-09-14 09:07:43 时间 
<!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>

 

相关文章