html5中扇形的绘制

卡夫卡的baby

已于 2022-07-05 09:24:04 修改

阅读量935

点赞数

分类专栏： html5 文章标签：前端 html5

于 2022-07-05 09:16:35 首次发布

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125612844

版权

扇形的绘制

代码如下：

<title>用户canvas画布绘制扇形和弧线</title>
</head>
<body>
   
    <canvas id="mycans" style="border:9px solid yellow;"></canvas>
    <script>
        // 抓取元素
        var mycans =document.querySelector('#mycans')
        console.log(mycans);
        // 设置画布的宽度和高度
        mycans.width =600;
        mycans.height =600;
        // 调用getContext(),返回给我们一个对象，这个对象里提供了若干个方法，供我们去绘制图形
        var ctx = mycans.getContext('2d');
        console.log(ctx);
        // 开始绘制路径  画画
        ctx.beginPath();
        //  准备要使用的颜色
        ctx.fillStyle ='pink';
        ctx.strokeStyle ='green';
        // 设置当前线条的宽度
        ctx,lineWidth =50;
        // 画画 ----逆时针绘制300度的扇形
        // 从圆心到弧线起点
        // 开始绘制路径
        ctx.moveTo(100,100);
        // 圆心的坐标(100,100)
        ctx.arc(100,100,100,0*Math.PI/180,60*Math.PI/180,true);
        // 再到终点