js：使用canvas画一个半圆

背景

需求需要画一个半圆，或者多半圆，其实一下子就能想到 canvas 中的圆弧，核心使用 context.arc

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

在这里插入图片描述
在这里插入图片描述

接下来我们看看示例

例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const angle = 50; // 你的角度值
  const score = 50; // 你的分数值

  // 外层圆环
  context.beginPath();
  context.arc(width / 2, height - 20, width / 2 - 30, 1 * Math.PI, 2 * Math.PI);
  context.lineWidth = 4;
  context.lineCap = 'round';
  context.strokeStyle = '#DEDEDE';
  context.stroke();

  // 外层进度圆环
  context.beginPath();
  context.arc(width / 2, height - 20, width / 2 - 30, 1 * Math.PI, (1 + angle / 100) * Math.PI);
  context.lineWidth = 4;
  context.lineCap = 'round';
  const gnt1 = context.createLinearGradient(0, 0, 180, 0);
  gnt1.addColorStop(0, '#8ce459');
  gnt1.addColorStop(1, '#62af35');
  context.strokeStyle = gnt1;
  context.stroke();

  // 指示器
  const xAxis = Math.cos(Math.PI * 2 / 360 * (1.8 * (100 + angle))) * (width / 2 - 30);
  const yAxis = Math.sin(Math.PI * 2 / 360 * (1.8 * (100 + angle))) * (width / 2 - 30);
  context.beginPath();
  context.arc(width / 2 + xAxis, height - 20 + yAxis, 5, 0, 2 * Math.PI);
  context.fillStyle = '#5EAD35';
  context.fill();

  // 文本
  const textY = Math.sin(Math.PI * 2 / 360 * (1.8 * (100 + 15))) * (width / 2 - 30);
  context.fillStyle = '#168C66';
  context.font = '40px Arial';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText(score, width / 2 - 5, height + 10 + textY);

  context.fillStyle = '#62AF35';
  context.font = '14px Arial';
  context.fillText('分', width / 2 + 30, height + 18 + textY);

  // 内层圆环
  context.beginPath();
  context.arc(width / 2, height - 20, width / 2 - 40, 1 * Math.PI, 2 * Math.PI);
  context.lineWidth = 2;
  context.setLineDash([1, 4]);
  context.lineCap = 'round';
  context.strokeStyle = '#A2BCC3';
  context.stroke();
</script>

</body>
</html>

在这里插入图片描述

例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .canvas-main {
      width: 400px;
      height: 400px;
      position: relative;
    }
    .main-text {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div class="canvas-main">
  <canvas id="main-canvas" width="400" height="400"></canvas>
  <div class="main-text">10分</div>
</div>

<script>
  const canvas = document.getElementById('main-canvas');
  const context = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const score = 50; // 你的分数值
  const totalScore = 100; // 总分
  const scorePercentage = score / totalScore; // 你的分数值占总分的百分比

  // 外层圆环
  context.beginPath();
  context.arc(width / 2, height / 2, width / 2 - 30, 0.75 * Math.PI, 2.25 * Math.PI, false);
  context.lineWidth = 14;
  context.lineCap = 'round';
  context.strokeStyle = '#f5edfc';
  context.stroke();

  // 外层进度圆环
  context.beginPath();
  // 最小-最大：0.75 * Math.PI 到 2.25 * Math.PI    2.25 - 0.75 = 1.5
  context.arc(width / 2, height / 2, width / 2 - 30, 0.75 * Math.PI, (0.75 + 1.5 * scorePercentage) * Math.PI, false);
  context.lineWidth = 14;
  context.lineCap = 'round';
  const gnt1 = context.createLinearGradient(0, 0, 180, 0);
  gnt1.addColorStop(0, '#f5edfc');
  gnt1.addColorStop(1, '#9c4ce3');
  context.strokeStyle = gnt1;
  context.stroke();

  // 指示器
  const indicatorAngle = 0.75 + 1.5 * scorePercentage;
  const indicatorRadius = width / 2 - 30;
  const indicatorX = width / 2 + Math.cos(indicatorAngle * Math.PI) * indicatorRadius;
  const indicatorY = height / 2 + Math.sin(indicatorAngle * Math.PI) * indicatorRadius;

  context.beginPath();
  context.arc(indicatorX, indicatorY, 10, 0, 2 * Math.PI); // 外圈半径设置为 10
  context.fillStyle = '#fff';
  context.strokeStyle = '#fff'; // 外圈线颜色也为白色
  context.lineWidth = 2; // 设置线宽，增加外圈线的宽度
  context.fill();
  context.stroke();

  // 指示器内部填充红色
  context.beginPath();
  context.arc(indicatorX, indicatorY, 6, 0, 2 * Math.PI);
  context.fillStyle = '#9c4ce3';
  context.fill();
</script>

</body>
</html>

在这里插入图片描述

小程序

如果是小程序的话，把 api 换一下

<canvas id="ring" canvas-id="ring" class="progress-canvas"></canvas>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    score: {
      type: Number
    },
    totalScore: {
      type: Number
    }
  },
  observers: {
    score: function(data) {
      if (data || data === 0) {
        this.init()
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      const query = this.createSelectorQuery()
      query
        .select('#ring')
        .boundingClientRect(res => {
          this.drawRing(
            'ring',
            res.width,
            res.height,
            this.data.score,
            this.data.totalScore
          )
        })
        .exec()
    },
    drawRing: function(canvasId, width, height, score, totalScore) {
      var context = wx.createCanvasContext(canvasId, this)

      // const score = 50 // 你的分数值
      // const totalScore = 100 // 总分
      const scorePercentage = score / totalScore // 你的分数值占总分的百分比

      // 外层圆环
      context.beginPath()
      context.arc(
        width / 2,
        height / 2,
        width / 2 - 30,
        0.75 * Math.PI,
        2.25 * Math.PI,
        false
      )
      context.lineWidth = 14
      context.lineCap = 'round'
      context.strokeStyle = '#f5edfc'
      context.stroke()

      // 外层进度圆环
      context.beginPath()
      context.arc(
        width / 2,
        height / 2,
        width / 2 - 30,
        0.75 * Math.PI,
        (0.75 + 1.5 * scorePercentage) * Math.PI,
        false
      )
      context.lineWidth = 14
      context.lineCap = 'round'
      const gnt1 = context.createLinearGradient(0, 0, 180, 0)
      gnt1.addColorStop(0, '#f5edfc')
      gnt1.addColorStop(1, '#9c4ce3')
      context.strokeStyle = gnt1
      context.stroke()

      // 指示器
      const indicatorAngle = 0.75 + 1.5 * scorePercentage
      const indicatorRadius = width / 2 - 30
      const indicatorX =
        width / 2 + Math.cos(indicatorAngle * Math.PI) * indicatorRadius
      const indicatorY =
        height / 2 + Math.sin(indicatorAngle * Math.PI) * indicatorRadius

      // 指示器外圈
      context.beginPath()
      context.arc(indicatorX, indicatorY, 10, 0, 2 * Math.PI) // 外圈半径设置为 10
      context.setFillStyle('#fff')
      context.setStrokeStyle('#fff') // 外圈线颜色也为白色
      context.setLineWidth(2) // 设置线宽，增加外圈线的宽度
      context.fill()
      context.stroke()

      // 指示器内部填充红色
      context.beginPath()
      context.arc(indicatorX, indicatorY, 6, 0, 2 * Math.PI)
      context.setFillStyle('#9c4ce3')
      context.fill()

      context.draw()
    }
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/326683.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot集成p6spy

SpringBoot集成p6spy

P6Spy 是一个可以用来在应用程序中拦截和修改数据操作语句的开源框架。 通过 P6Spy 我们可以对 SQL 语句进行拦截，相当于一个 SQL 语句的记录器，这样我们可以用它来作相关的分析，比如性能分析。这里主要用于在控制台打印SQL时能自动将问号替换成实际参数打印一个可执行的SQL…
阅读更多...
将 pyparamvalidate 项目，发布至 pypi

将 pyparamvalidate 项目，发布至 pypi

目录 一、前置说明1、总体目录2、相关回顾3、本节目标 二、操作步骤1、项目目录2、编写 pyproject.toml 文件3、编写 LICENSE 文件4、编写 README.md 文件5、升级 pip、build、twine 工具6、打包发布的版本7、测试发布至 TestPyPI8、创建测试项目&#xff0c;测试发布结果9、正…
阅读更多...
成功解决VScode进入到内置函数中调试

成功解决VScode进入到内置函数中调试

主要有两个关键步骤&#xff0c; 第一步 将launch.json中的"justMyCode"设为false 可通过使用ctrlshiftP搜索lauch.json找到次文件 如果找不到的话&#xff0c;可点击debug按钮&#xff0c;然后找到点击create a launch.json file创建 创建得到的launch.json如下&am…
阅读更多...
直接win+r打开命令控制台安装element-ui 与 在项目目录下安装element-ui的区别是什么？

直接win+r打开命令控制台安装element-ui 与 在项目目录下安装element-ui的区别是什么？

使用Windows运行命令&#xff08;WinR&#xff09;打开命令控制台&#xff08;通常指的是cmd或PowerShell&#xff09;并安装element-ui与在项目目录下打开命令控制台进行安装的主要区别在于当前工作目录的不同。 直接WinR打开命令控制台安装element-ui&#xff1a;这种方式下…
阅读更多...
On the User Behavior Leakage from Recommender System Exposure

On the User Behavior Leakage from Recommender System Exposure

ACM TOIS 2023 代码链接 系统暴露&#xff1a;用户的当前推荐项目列表。 对推荐系统进行攻击也就是说根据用户当前推荐项目列表输出用户的历史行为。 论文试图解决什么问题&#xff1f; 本文试图解决的问题是&#xff1a;在推荐系统中&#xff0c;用户历史行为隐私是否可以从…
阅读更多...
mysql配置（各种配置参数详解）

mysql配置（各种配置参数详解）

mysql配置文件 在MySQL中&#xff0c;常用的配置包括&#xff1a; 数据库服务器配置 bind-address&#xff1a;指定MySQL服务器绑定的IP地址&#xff0c;默认为0.0.0.0&#xff08;所有可用IP&#xff09;。port&#xff1a;指定MySQL服务器监听的端口号&#xff0c;默认为330…
阅读更多...
vscode显示120字符或者80字符提示线或者显示垂直标尺

vscode显示120字符或者80字符提示线或者显示垂直标尺

vscode显示120字符或者80字符提示线或者显示垂直标尺 一般规定一行代码不超过80或者120个字符。取决于团队的编码规范。 不同公司不同团队有不同的规定。 当单行代码过长。产生横向滚动条。使得代码难以阅读。 打开全局设置的settings.json /C:/Users/xxx/AppData/Roaming/Cod…
阅读更多...
Simulink旧版本如何打开新版的模型文件

Simulink旧版本如何打开新版的模型文件

Simulink旧版本如何打开新版的模型文件 当用旧版本Simulink软件打开模型时会报错&#xff0c;是因为版本不兼容造成的 解决办法 在simulink的选项中去掉 do not load models created with newer version of Simulink
阅读更多...
腾讯云优惠券怎样领取？附最新优惠券领取教程

腾讯云优惠券怎样领取？附最新优惠券领取教程

腾讯云优惠券是腾讯云推出的一种优惠活动&#xff0c;通常包含代金券和折扣券两种形式&#xff0c;可以在购买腾讯云产品结算时抵扣部分费用或享受特定折扣&#xff0c;帮助用户降低购买腾讯云产品的成本。 一、腾讯云优惠券类型 1、代金券&#xff1a;代金券可以在购买腾讯云…
阅读更多...
【Docker篇】从0到1搭建自己的镜像仓库并且推送镜像到自己的仓库中

【Docker篇】从0到1搭建自己的镜像仓库并且推送镜像到自己的仓库中

文章目录 &#x1f50e;docker私有仓库&#x1f354;具体步骤 &#x1f50e;docker私有仓库 Docker私有仓库的存在为用户提供了更高的灵活性、控制和安全性。与使用公共镜像仓库相比&#xff0c;私有仓库使用户能够完全掌握自己的镜像生命周期。 首先&#xff0c;私有仓库允许…
阅读更多...
高性能小模型SLM最新优化方案和热门应用盘点，附配套模型和开源代码

高性能小模型SLM最新优化方案和热门应用盘点，附配套模型和开源代码

当大多数人都还在卷谁的大模型参数规模大的时候&#xff0c;聪明人已经开始搞“小模型”了&#xff08;doge&#xff09;。 这里的小模型指的小型语言模型&#xff08;Small Language Model&#xff0c;简称SLM&#xff09;&#xff0c;通常用于解决资源受限或实时性要求较高的…
阅读更多...
有什么常用的服务器集群？

有什么常用的服务器集群？

随着互联网的快速发展&#xff0c;服务器集群已经成为了构建高可用、高性能、可扩展和安全可靠的计算环境的必备基础设施。在众多服务器集群中&#xff0c;有一些常用的集群类型&#xff0c;下面将介绍其中几种常见的服务器集群。 一、负载均衡集群 负载均衡集群通过将网络请…
阅读更多...
车机联网

车机联网

通过笔记本电脑&#xff0c;D-link给车机提供网络 因为笔记本用的无线网络上网&#xff0c;将无线网络连接设置为共享 设置后的效果 本地连接属性设置 Dlink连接电脑和车机&#xff1b;获取车机的动态ip&#xff08;动态ip每次开关机都会变化&#xff0c;注意更新&#xff09…
阅读更多...
Matlab：isomorphism

Matlab：isomorphism

语法&#xff1a; P isomorphism(G1,G2) %计算图G1和G2之间的图同构等价关系&#xff08;如果存在&#xff09;。若不存在同构&#xff0c;则P为空数组 P isomorphism(___,Name,Value) %使用一个或多个名称-值对组参数指定其他选项 [P,edgeperm] isomorph…
阅读更多...
学习c语言，有序序列合并

学习c语言，有序序列合并

阅读更多...
[AutoSar]BSW_OS 01 Autosar OS入门

[AutoSar]BSW_OS 01 Autosar OS入门

目录 关键词平台说明一、Autosar OS 的位置二、Autosar OS 与OSEK三、TASK3.1两种task3.2 两种task 的区别3.3task 的抢占机制 四、scalability class五、Task Priorities 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商…
阅读更多...
前端h5页面和后端php服务的几种部署方式

前端h5页面和后端php服务的几种部署方式

一、背景 和java后端服务的部署不同&#xff0c;前端h5的部署有好几种。 CDNOSSnginx反向把输出物全部拷贝到后端 所以&#xff0c;这就带来了部署上的歧义&#xff0c;到底该用哪种部署方式呢&#xff1f; 本文以前端h5搭配后端php程序为示例&#xff0c;试着讨论一下他们…
阅读更多...
【STM32】单片机生产实习报告

【STM32】单片机生产实习报告

第1章 概述 1.1 项目背景 在当前科技飞速发展的背景下&#xff0c;嵌入式系统的广泛应用成为推动各行业创新的主要驱动力。我们秉持着培养学生实际操作能力的宗旨&#xff0c;特别设计了这个生产实习项目。通过嵌入式系统开发任务&#xff0c;我们旨在全面锻炼学生的工程实践…
阅读更多...
强化学习11——DQN算法

强化学习11——DQN算法

DQN算法的全称为&#xff0c;Deep Q-Network&#xff0c;即在Q-learning算法的基础上引用深度神经网络来近似动作函数 Q ( s , a ) Q(s,a) Q(s,a) 。对于传统的Q-learning&#xff0c;当状态或动作数量特别大的时候&#xff0c;如处理一张图片&#xff0c;假设为 210 160 3 …
阅读更多...
一键完成爬虫之Cookie获取：利用浏览器模拟一个cookie出来、面对反爬虫、加密的cookie的应对方法

一键完成爬虫之Cookie获取：利用浏览器模拟一个cookie出来、面对反爬虫、加密的cookie的应对方法

一键完成爬虫之Cookie获取&#xff1a;利用浏览器模拟一个cookie出来、面对反爬虫、加密的cookie的应对方法 本文提供一个快速取得cookie的办法&#xff0c;用来应对一些网站的的反爬虫和cookie失效等情况本接口是收费的&#xff08;1分钱1次调用&#xff0c;不愿付费自行折腾…
阅读更多...
最新文章

Copyright @ 2022~2023