canvas学习绘制扇形

最新推荐文章于 2023-07-08 11:58:15 发布

weixin_30500289

最新推荐文章于 2023-07-08 11:58:15 发布

阅读量624

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liao13160678112/p/6400405.html

版权

1.自己用canvas绘制的一个丑丑的扇形（两个圆弧+一个梯形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas{background:#333333;}
    </style>
</head>
<body>
    <canvas id="acanvas" width="500" height="500">
        您的浏览器不支持html5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('acanvas');
        var p=canvas.getContext('2d');
        p.lineWidth=2;
        p.strokeStyle="yellow";
        p.fillStyle="yellow";

        p.moveTo(100,250);
        p.lineTo(400,250);
        p.lineTo(350,300);
        p.lineTo(150,300);
        p.fill();
        p.stroke()

        p.beginPath();
        p.arc(250,510,301,Math.PI*4/3,Math.PI*5/3);
        p.fill();

        p.beginPath();
        p.fillStyle="#333333";
        p.arc(250,475,201,Math.PI*4/3,Math.PI*5/3);
        p.fill();


    </script>

</body>
</html>

2.从视频中学习的canvas绘画扇形(两个扇形组合成一个扇子的模样)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas{background:#A9A9A0;}
    </style>
</head>
<body>
    <canvas id="bcanvas" width="800" height="800">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('bcanvas');
        var pi=canvas.getContext('2d');
        pi.lineWidth=2;
        pi.strokeStyle="yellow";
        pi.fillStyle="orange";
        pi.moveTo(400,500);
        pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();

        pi.beginPath();
        pi.strokeStyle="orange";
        pi.fillStyle="#A9A9A0";
        pi.moveTo(400,500);
        pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/liao13160678112/p/6400405.html