【Canvas技法】绘制扇形

原创 已于 2025-06-29 21:25:04 修改 · 1.2k 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
技法

当前文章被收录于：

技法
22 篇文章 0 人学习

Canvas技巧与方法

订阅专栏 查看详情
于 2024-04-15 19:12:53 首次发布

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>绘制扇形 Draft1</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=WIDTH;
    canvas.height=HEIGHT;

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){  
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
    }

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.save();
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();
        
        const R=210;//基准尺寸
        ctx.lineWidth=2;

        // 内右
        var rIn=R*0.25;
        var rOut=R*0.5;        
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.fillStyle="RGB(215,204,182)";
        drawFan(ctx,0,0,rIn,rOut,-Math.PI/4,Math.PI/4);
        ctx.fill();
        ctx.stroke();

        // 内下     
        ctx.strokeStyle="black";
        ctx.fillStyle="white";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/4,Math.PI/4*3);
        ctx.fill();
        ctx.stroke();

        // 内左     
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.fillStyle="RGB(215,204,182)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/4*3,Math.PI/4*5);
        ctx.fill();
        ctx.stroke();

        // 内上    
        ctx.strokeStyle="black";
        ctx.fillStyle="white";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/4*5,-Math.PI/4);
        ctx.fill();
        ctx.stroke();

        // 外1
        var rIn=R*0.75;
        var rOut=R*1.0;        
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.fillStyle="RGB(215,204,182)";
        drawFan(ctx,0,0,rIn,rOut,0,Math.PI/3);
        ctx.fill();
        ctx.stroke();

        // 外2     
        ctx.strokeStyle="black";
        ctx.fillStyle="white";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/3,Math.PI/3*2);
        ctx.fill();
        ctx.stroke();

        // 外3 
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.fillStyle="RGB(215,204,182)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/3*2,Math.PI);
        ctx.fill();
        ctx.stroke();

        // 外4     
        ctx.strokeStyle="black";
        ctx.fillStyle="white";
        drawFan(ctx,0,0,rIn,rOut,Math.PI,Math.PI/3*4);
        ctx.fill();
        ctx.stroke();

        // 外5 
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.fillStyle="RGB(215,204,182)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/3*4,Math.PI/3*5);
        ctx.fill();
        ctx.stroke();

        // 外6
        ctx.strokeStyle="black";
        ctx.fillStyle="white";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/3*5,Math.PI/3*6);
        ctx.fill();
        ctx.stroke();


        writeText(ctx,0,R*0.05,"扇形的绘制","18px consolas","black");
        
                
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制扇形
ctx:绘图上下文
x:扇形圆心心横坐标
y:扇形圆心纵坐标
rIn:扇形内径
rOut:扇形外径
startAngle:起始角度
endAngle:中止角度
----------------------------------------------------------*/
function drawFan(ctx,x,y,rIn,rOut,startAngle,endAngle){
    var a=createPt(x+rIn*Math.cos(startAngle),y+rIn*Math.sin(startAngle));
    var b=createPt(x+rOut*Math.cos(startAngle),y+rOut*Math.sin(startAngle));
    var c=createPt(x+rOut*Math.cos(endAngle),y+rOut*Math.sin(endAngle));
    var d=createPt(x+rIn*Math.cos(endAngle),y+rIn*Math.sin(endAngle));

    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.arc(x,y,rOut,startAngle,endAngle,false);
    ctx.lineTo(c.x,c.y);
    ctx.lineTo(d.x,d.y);
    ctx.arc(x,y,rIn,endAngle,startAngle,true);
    ctx.closePath();
}

/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){
    ctx.fillStyle=style;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
最完美的状态，不是你从不失误，而是你从未放弃成长。
没人能把你变得越来越好，时间和经历只是陪衬，
支撑你越来越好的，是你坚强的意志、修养、品行，
以及不断的反思和修正。
--------------------------------------------------------------*/
//-->
</script>

END

标签
#canvas #扇形
Canvas 实现四个扇形组成的圆，点击或触摸时，点在哪个扇形里，绘制扇形渐变背景色
21空间的博客
08-08 1414
1. 实现一个圆形； 2. 在圆形上绘制4个扇形； 3. 每个扇形点击时，是一种颜色；非点击时，是一种颜色； 4.长按扇形时，出现长按的背景；
canvas绘制圆弧、扇形 && 文字【从0开始学习canvas—第3篇】
一只小绵羊
03-08 1519
canvas绘制圆弧、扇形 && 文字
Canvas之使用弧度绘制扇形图
Welkin_qing的博客
11-29 8382
一、体现曲线的绘制 首先需要明白角度和弧度的关系： 一个角度等于π/180个弧度 1. 根据点动成线的概念绘制圆弧（利用函数） 比如： y = x/2 y = (x + 2) ^2 y = sin(x) 在这里我们使用三角函数做示例 or(var i = 1 ; i &amp;lt; 600 ; i ++){ var x = i; var y = 50*Math.s...
光流法实战：如何用OpenCV的Farneback算法实现图像对齐（附调参技巧）
最新发布
weixin_29266007的博客
03-31 270
本文详细介绍了如何使用OpenCV的Farneback稠密光流算法实现图像对齐，包括核心原理、参数调优和工程实现。通过实战代码和参数优化策略，帮助开发者解决动态场景中的图像对齐问题，提升多帧融合和视频处理的效果。
使用canvas绘制圆形，扇形
m0_62052306的博客
07-08 886
hello，我是小九，今天我们来使用Canvas绘制圆形，扇形。
使用canvas绘制扇形图
Super涌
04-18 8349
标签定义图形，比如图表和其他图像, 必须使用脚本来绘制图形。 html代码: JavaScript代码: function drawCircle(canvasId,data_arr,color_arr,text_arr) { var c=document.getElementById(canvasId);
canvas绘制转盘/扇形 rotate
宏斌的博客
12-03 1677
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
js+canvas 监听点击扇形区域 事件
qq_20423863的博客
05-30 3217
最近业务突发奇想用饼图当导航首页，于是就想到了利用canvas+js 监听 点击的扇形 跳转到对应的链接去。 废话不多说，先看图。 先划一个圆形和一个角度为60度的扇形(圆心100,100，半径100)，当然度数自己可以改，我为了简单先用60代替，下面代码中也是已60度为基础的。 1.实例化canvas var canvas=document.getElementByI...
用canvas画布绘制扇形和弧线
m0_71814235的博客
06-21 1164
用canvas画布绘制扇形和弧线
html5 canvas元素扇形的绘制
蛮牛呆呆的博客
12-16 5688
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
canvas绘制扇形，可以改变数量、扇形角度、扇形方向
z_blackbear的博客
05-07 1976
canvas绘制扇形，支持调整扇形角度，扇形方向 createCanvas() { // 创建一个canvas标签，你也可以在html直接插入，通过document.getElementById(id)的方式获取 this.ele = document.createElement('canvas'); // 设置canvas标签的 id 属性 this.ele.id = 'myCanvas' // 设置c
Qml--canvas实践小实例 —— 扇形
波风水门
01-15 2112
俗话说：发图不留种，菊花万人捅！我这里想延伸一下：教学不给例，说你是傻逼！哎呀，还挺押韵，嘻嘻，开个玩笑！ 我们都讲了四期API的知识了，估计大家看的也是枯燥的很啊，前面的小实例也是太简单，简直不解渴啊，但是也不能一口气就吃成一个胖子，下面再给大家来一个小实例，给大家提提神！ 前面在讲画圆的时候，给大家留了一个思考，或者说是一个坑吧，就是如何来画一个扇形？我们知道画圆的方法是无法一下子就能画出一个...
canvas画扇形、饼图
aizou6838的博客
04-12 898
画扇形的方法 方法一：起始角度是0，那么第一条线就是line(r,0)，通过旋转扇形的角度，第二条线就是line(r,0) //圆弧 ctx.save(); ctx.translate(100, 100); ctx.arc(0,0,100,0, 30*Math.PI/180); ctx.restore(); //第一条线 ctx.save(); ctx.moveTo...
canvas画扇形图（本文来自于http://jo2.org/html5-canvas-sector/）
anji393003的博客
09-18 468
1.定义画扇形的构造函数： //扇形CanvasRenderingContext2D.prototype.sector=function(x,y,radius,sDeg,eDeg){// 初始保存this.save();// 位移到目标点this.translate(x,y);this.beginPath();// 画出圆弧this.arc(0,0,radius,sD...
帧动画的简单写法
天天的博客
09-22 631
  慕课- Python Flask高级编程 任何事情都是很简单，只要基本工扎实 所谓的行业，就是就是一大堆简单的东西堆起来的 何况我们只能从最基本的开始构建，迭代式的构建知识体系？？ 首先看图片：   2， 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...
使用canvas绘制一个扇形
王铁柱666的博客
12-18 503
元素和JavaScript来绘制一个扇形。元素和它的2D渲染上下文，然后设置了扇形的中心点、半径、开始角度和结束角度，并调用。获取），扇形的中心点坐标、半径、开始角度和结束角度作为参数。你可以根据需要调整这些参数来绘制不同大小和角度的扇形。注意，角度是以弧度表示的，你可以使用。// 结束角度，以弧度表示（这里是60度）在前端开发中，你可以使用HTML的。在这个示例中，我们定义了一个。// 开始角度，以弧度表示。开始一个新的路径，然后使用。来绘制扇形的轮廓，最后使用。来表示180度，因此。
00008__在 Canvas 中绘制扇形
行潇
12-01 506
请看：https://www.cnblogs.com/lilixing/p/4302635.html
canvas的矩形，圆弧，扇形，文本基本用法+ 绘制病状图
Amanda_wmy的博客
08-01 1320
canvas的矩形，圆弧，扇形，文本基本用法+ 绘制病状图 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial
canvas学习绘制扇形
weixin_30500289的博客
02-15 710
1.自己用canvas绘制的一个丑丑的扇形（两个圆弧+一个梯形） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&g...
使用bandersnatch搭建pypi 本地镜像源（20211026）
liurizhou的博客
10-26 6431
需求背景：公司内网不能联网，同时开发工作需要各种python的模块，因此需要搭建一个pypi的本地镜像源。 参考网上的方法，总结了大致有下面几种方式搭建pypi本地源： devpi: 企业内网利用devpi搭建pypi私服 - 简书 pip2pi: https://yangfannie.com/1439.html pypiserver: https://zhongneng.github.io/2019/02/16/creat-pip/ bandersnatch:基于bandersnatch搭...
反光衣服检测数据集、头盔检测yolov5、工作服检测数据集、安全帽检测、施工人员穿戴检测.zip
reflective-clothes-detect-yolov5 和数据集作者是 雷雷yolov5检测QQ群980489677，QQ2群710514100数据集下载链接参见说明-数据集下载链接请参见说明！README_ZN 中文版说明README_EN 英文描述tensorRt 推理 python 版本演示数据标签工具连续可变功率放大器CVAT 教程其他建筑分割数据集火灾烟雾探测数据集
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值