canvas-arc.html

最新推荐文章于 2022-06-13 15:34:13 发布

Joe?

最新推荐文章于 2022-06-13 15:34:13 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cynthia-wuqian/p/4978305.html

本文展示了如何使用HTML5 Canvas API绘制一系列动态圆形动画，并通过JavaScript实现圆弧的绘制与颜色填充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas');

        canvas.width = 1024;
        canvas.height = 768;

        if(canvas.getContext('2d')){
            var context = canvas.getContext('2d');

            context.lineWidth = 5;
            context.strokeStyle = "#005588";
            
            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,50,40,0,2*Math.PI*(i+1)/10,false);
                context.closePath();

                context.stroke()
            }

            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false);
                // context.closePath();

                context.stroke()
            }

            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,350,40,0,2*Math.PI*(i+1)/10,false);
                context.closePath();

                context.stroke();
                context.fillStyle ="#005588"
                context.fill();
            }
        

        }else{
            alert('当前游览器不支持Canvas，请更换游览器后再试！');
        }
    }
</script>
</body>

<script>
/*
  总结

  context.arc(
    （圆心x 圆心y  半径r）
    centerx,centery,radius,

    （起始角度，终止角度）
    startingAngle,endingAngle,

    (false 顺时针绘制)
    anticlockwise = false
  )
*/
</script>
</html>