• Canvas下画仪表盘，结合设计好的表盘背景

    最近需要搞一个仪表盘动态更新的功能，新改版风格的UI表盘都不适用只有自己画了。

    先上效果图：

    1. 补充几个知识

    canvas坐标系：左上角的点为0.0 右下角的点为 width，height， 与之前我们学习的坐标系不同

     cans.arc(x,y,r,0,Math.PI,1);

            圆的中心的 x 坐标。
         y    圆的中心的 y 坐标。
         r    圆的半径。
         sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
         eAngle    结束角，以弧度计。
         counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

     ctx.fillText("textAlign=center",150,120); 实心字体
    ctx.strokeText("Sample String", x0-text.width/2, y0-30) 空心字体

     2.如何画一个半圆？

    思路就是：其实角度为Math.PI ,结束角度为0，或者2Math.PI ，效果都是一样的，确定好了开始结束角度就能简单的画一个半圆

    3.如何画一个指针的尖尖的三角？

    思路就是先画一个宽一点的线段，根据线宽的一半来确定上下浮动的角度。

    一个圆周是360.周长是2*Math.PI*R  ,所以确定上下的浮动角度=2*Math.PI*R *360*线宽/2

    再根据起始角度的不同算出来不同的坐标，先左下，在lineto到顶点，linto到第二点就可以实现

    4.

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12. <canvas id="mycanvas" class="mycanvas" width="338" height="168"></canvas>
    13. </body>
    14.  
    15. <script>
    16.     /**
    17.      * 	圆的中心的 x 坐标。
    18.      y	圆的中心的 y 坐标。
    19.      r	圆的半径。
    20.      sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
    21.      eAngle	结束角，以弧度计。
    22.      counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    24. 	 		 ctx.lineTo(lineEndX,lineEndY);
    25. 		  ctx.lineTo(angEndX,angEndY);
    26. 		   ctx.fill();
    28. 	  // 线条末端线帽的设置为圆形
    29.             ctx.lineCap = 'round';
    30. let differ =  4.6/2/Math.PI/ange3*360
    32. 				ctx.fillText("textAlign=center",150,120); 实心字体
    33. 				ctx.strokeText("Sample String", x0-text.width/2, y0-30) 空心字体
    35.      * @type {number}
    36.      */
    37.  
    38. 	  var canvas = document.getElementById('mycanvas');
    39.     const x0 = canvas.width/2;  // 圆心坐标
    40.     const y0 = canvas.height;  // 圆心坐标
    41.     const r1 = (x0 / 2 - 16) * 2 // 外圆半径
    42.     const r2 = (x0 / 2 - 30) * 2 // 内圆半径
    43. 	const ange3 = (x0 / 2 - 20) * 2 // 线段终止的地方
    44.     const startAng = 180; // 起始角度
    45. 	const curSpeedTex ="实时速率（Mbps）";
    46. 	let  curSpeed =  Math.floor(Math.random()  *3500);
    47. 	const maxSpeed =3500;
    48. 	let targetAng = curSpeed/maxSpeed*180+startAng; // 起始角度
    49.     function getPointX(r, ao) {
    50.         return x0 + r * Math.cos(ao * Math.PI / 180)
    51.     }
    52.  
    53.     function getPointY(r, ao) {
    54.         return y0 + r * Math.sin(ao * Math.PI / 180)
    55.     }
    56.  
    57.     var ctx = canvas.getContext("2d");
    58.     ctx.beginPath();
    59. 	 var img = new Image();//创建img元素
    60. 	 img.onload = function(){
    61. 					// 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，height
    62.      console.log("img.width="+img.width+",img1.height="+img.height);
    63. 					ctx.drawImage(img,0,0,img.width,img.height);
    64. 				}
    65. 	img.src = 'yibiaopan.png';//设置图片源地址
    66.     ctx.fillStyle="#FEB95A";
    67. 	    // 获取大圆上的点 与 边界圆交点
    68.     let lineStartX = this.getPointX(r2,  targetAng);
    69.     let lineStartY = this.getPointY(r2, targetAng);
    70.     // 获取小圆上的点  与 边界圆交点
    71.     let lineEndX = this.getPointX(r1, targetAng);
    72.     let lineEndY = this.getPointY(r1, targetAng);
    73. 	let angX = this.getPointX(ange3,  targetAng);
    74.     let angY = this.getPointY(ange3, targetAng);
    75. 	 ctx.beginPath();
    76. 	 ctx.moveTo(lineStartX, lineStartY);
    77. 	 					ctx.lineWidth = 5;
    78. 						ctx.lineCap = 'round';
    79.      ctx.strokeStyle = '#FEB95A';
    80. 	 ctx.lineTo(angX,angY);
    81. 	 ctx.stroke();
    82.  
    83. 		// 根据线的宽度确定小三角的开始坐标的偏移角度
    84. 		let differ =  2.8/2/Math.PI/ange3*360
    85.  
    86.         // 确定左下的坐标
    87. 		let angStartX = this.getPointX(ange3,  targetAng-differ);
    88. 		let angStartY = this.getPointY(ange3, targetAng-differ);;
    89.  
    90. 		let angEndX = this.getPointX(ange3,  targetAng+differ);
    91. 		let angEndY = this.getPointY(ange3, targetAng+differ)	;
    92. 		ctx.moveTo(angStartX, angStartY);
    93. 		ctx.lineWidth = 1;
    94. 		ctx.lineTo(lineEndX,lineEndY);
    95. 		ctx.lineTo(angEndX,angEndY);
    96. 		ctx.fill();
    97. 		ctx.stroke();
    98. 		ctx.strokeStyle = '#FEB95A';
    99. 		ctx.save();
    100. 		ctx.fillStyle="#00FFDC";
    101. 		// 写文字
    102. 		 ctx.font = "28px Verdana"
    103.  
    104.         // 确定文字长度，文字一半的位置刚好可以居中
    105. 		var text = ctx.measureText(curSpeed)
    106. 		console.log("text="+text.width+",text.height"+text.height);
    107. 		ctx.fillText(curSpeed,x0-text.width/2, y0-45);
    108. 		ctx.restore();
    109. 		ctx.fillStyle="#FFF";
    110. 		 ctx.font = "16px Verdana"
    111. 		// 实时速率的文字
    112. 		var curspeed_text = ctx.measureText(curSpeedTex);
    113. 		ctx.fillText(curSpeedTex,x0-curspeed_text.width/2, y0-14);
    114.  
    115. 		ctx.closePath();
    116. </script>
    117.  
    118. <style>
    119. .mycanvas{
    120.  
    121. background-color:#232228;
    122. }
    123. </style>
    124.  
    125. </html>

  • 相关阅读:
    前端的简单介绍
    怒赞了，阿里P8面试官推荐的Java高并发核心编程文档
    普罗米修斯Prometheus安装和使用
    Qt 生成应用程序（二）软件多图标与文件操作
    使用 System.exit() 来优雅地终止 Spring Boot 项目
    基于模糊神经网络的时间序列预测（以hopkinsirandeath数据集为例，MATLAB）
    Nginx高级 第一部分：扩容
    Win10系统自带的虚拟机怎么打开教学
    绁炵粡缃戠粶杈撳叆鍥剧墖澶у皬
    卷积神经网络 异常检测,卷积神经网络故障检测
  • 原文地址：https://blog.csdn.net/jingyu333/article/details/125549683