canvas波浪扇形

2021-07-22 18:05:16 阅读：203 来源： 互联网

标签：canvas pw r2 px ctx 波浪扇形 var Math

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义波浪扇形(runoob.com)</title>
</head>
<body style="background-color:#000">

<h1></h1>
<p></p>
<canvas id="can1" ></canvas>
    <script type="text/javascript">
            var can1 = document.getElementById("can1");
            var ctx = can1.getContext("2d");

            
            var px = 135;  //  中心位置x
            var py = 110;  // 中心位置y
            var r1 = 40;  //  三个圆的半径
            var r2 = 30;   // 三个圆的半径
            var r3 = 5;   // 三个圆的半径
            
            var wavelevel = 60;  //波浪幅度
            
            var percent = 30; // 1-100
            
            var fontSize = 20;  // 字体大小
            var fontSizeWidth = 14; // 字体宽度
            var fontSizeHeigth = 20; // 字体高度

            ctx.save();
        
            
            
            ctx.beginPath();
        
            
            
            ctx.arc(px,py,r1,0,2*Math.PI);
            ctx.strokeStyle="rgba(0, 240, 255, 1)"
            ctx.lineWidth=2;
            ctx.stroke();
            
            ctx.restore();    
            ctx.save();
            
            
            
            
        
            ctx.shadowOffsetX = 0; // 阴影Y轴偏移
            ctx.shadowOffsetY = 0; // 阴影X轴偏移
            ctx.shadowBlur = 10; // 模糊尺寸
            ctx.shadowColor = 'rgba(0, 240, 255, 1)'; // 颜色    
            
            var angle = 45;    //假设角度为60度
             
            var radian = angle * Math.PI / 180;

            var py3 = py - Math.sin(radian)*r1;
            var px3 = px - Math.cos(radian)*r1;
            console.log(px3,py3)
            ctx.beginPath();
            ctx.arc(px3,py3,r3,0,2*Math.PI);
            ctx.fillStyle="rgba(0, 240, 255, 1)";
            ctx.closePath();
            ctx.fill();            
            ctx.restore();    
            ctx.save();    
            
            
            
            
            
            
            ctx.beginPath();
            ctx.arc(px,py,r2,0,2*Math.PI);
            ctx.strokeStyle="rgba(0, 240, 255, 1)"
            ctx.lineWidth=2;
            ctx.clip();
            
            
            ctx.stroke();    

            ctx.beginPath();
            ctx.arc(px,py,r2,0,2*Math.PI);
            ctx.fillStyle="rgba(0, 240, 255, 0.2)"

            
            
            ctx.fill();
            

            
             ctx.beginPath();
             
             let pw_x = px;
             let pw_y = py + (0.5 - (percent/100) )*2*r2;
             ctx.strokeStyle = "rgba(0, 240, 255, 1)";
             ctx.moveTo(pw_x - (r2), pw_y);
             ctx.bezierCurveTo( pw_x - (r2/2), pw_y - ((r2/2)*Math.tan(wavelevel * Math.PI / 180)), pw_x + (r2/2), pw_y + ((r2/2)*Math.tan(wavelevel * Math.PI / 180)), pw_x + (r2),pw_y);
             ctx.fillStyle="rgba(0, 240, 255, 1)";
             
             ctx.stroke();
             ctx.lineTo(px + (r2), py + (r2));
             ctx.lineTo(px - (r2), py + (r2));
             ctx.closePath();
             ctx.fill();
             
             
            ctx.restore();    
            ctx.save();    
            ctx.fillStyle = "#ffffff";
            ctx.font= fontSize + "px Arial";
            let valueStr =  percent + "%";
            ctx.fillText(valueStr, px - valueStr.length*fontSizeWidth/2 , py + (fontSizeHeigth/2));        
            
            

            
</script>
</body>
</html>

标签：canvas,pw,r2,px,ctx,波浪,扇形,var,Math
来源： https://www.cnblogs.com/hzsu/p/15045419.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas波浪扇形