canvas 绘制收入图表，canvas 绘制类似信用卡额度图表

最新推荐文章于 2022-05-16 10:53:35 发布

围城少年

最新推荐文章于 2022-05-16 10:53:35 发布

阅读量220

点赞数

分类专栏： canvas 文章标签： canvas html5 数据可视化贝塞尔曲线

本文链接：https://blog.csdn.net/weixin_38201500/article/details/105268349

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #canvas {
    border: 1px solid #999999;
  }
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
  let canvas = document.getElementById('canvas')
  canvas.width = 200
  canvas.height = 200
  let ctx = canvas.getContext('2d')
  //第一个圆
  ctx.beginPath()
  ctx.lineWidth = 10
  ctx.strokeStyle = '#F4F5FE'
  ctx.arc(100, 100, 70, 0, 2 * Math.PI)
  ctx.stroke()
  //第二个圆
  ctx.beginPath()
  ctx.lineWidth = 10
  ctx.strokeStyle = '#1965EF'
  ctx.arc(100, 100, 70, 0.5 * Math.PI, 1 * Math.PI)
  ctx.stroke()
  //绘制标题
  ctx.textAlign = 'center'
  ctx.font = '14px Verdana'
  ctx.fillStyle = '#333333'

  ctx.fillText('月收入', 100, 90)
  //绘制金额
  ctx.font = '20px Verdana'
  ctx.textAlign = 'center'
  ctx.fillText(`￥30000万`, 100, 120)
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

围城少年

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 绘制收入图表，canvas 绘制类似信用卡额度图表

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #canvas { border: 1px solid #99999...
复制链接

扫一扫