HTML5——Canvas_01之【绘制圆形】

最新推荐文章于 2025-02-28 08:12:52 发布

原创最新推荐文章于 2025-02-28 08:12:52 发布 · 403 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Canvas

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>绘制圆形</title>
    
    <script>
        function draw(id){
           var canvas=document.getElementById(id);//获取id
           if(canvas==null)//如果id为空就不画
           {
               return false;
           }

           var context=canvas.getContext("2d");//声明这个cavas是2d
           context.fillStyle="eeeeef";//2d颜色
           context.fillRect(0,0,600,700);//2d矩形宽600，长700
           
           for(var i=0;i<=10;i++)
           {
               context.beginPath();//准备画
               context.arc(i*25,i*25,i*10,0,Math.PI*2,true);//arc是画圆形
               context.closePath();//记得关闭
               context.fillStyle="rgba(255,0,0,0.25)";//要画的颜色
               context.fill();
           }

        }
    </script>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="600" height="700"></canvas>
</body>

</html>