canvas绘制圆环

简介: canvas绘制圆环

初识canvas

canvas 我们可以理解为是一个画布。
它是一个载体。
我们的文字,图案,都是在这个载体(画布)上来进行操作的。

canvas的5个要素

canvas 具有的5个要素:
1.id 元素的唯一标识
2.width 宽度
3.height 高度
4.画笔,上下文 canvas.getContext('2d')
5.内容(文字,图形,其他)

canvas 有两种形式的绘制模式

canvas 有两种形式的绘制模式:
1.填充模式(我们可以理解为是实心的) 如:ctx.fillRect 
2.路径模式(空心,线段连成的图案): 由一系列的点连成的线段 ctx.strokeRect

使用ctx.fillRect(x,y,width,height)绘制一个矩形【填充模式】

<body>
  <canvas id="canvas" width="1000" height="500" ></canvas>
</body>
<script>
  let  canvas =document.getElementById('canvas')
  // 获取画笔(上下文)
  let ctx= canvas.getContext('2d')
  // 绘制一个矩形 fillRect(x坐标,y坐标,宽度,高度)
  ctx.fillRect(100,100,200,20)
</script>

使用 ctx.strokeRect(x,y,width,height)绘制一个矩形【路径模式】

let ctx= canvas.getContext('2d')
ctx.strokeRect(100,100,200,20);

使用canvas绘制一个圆环图

1.我们绘制圆环图。需要使用 content.arc这个方法
2.绘制当前的进度   ctx.arc(x,y,r,0, Math.PI / 180 *( 360 * jinDu/ 100));
3.在圆环中间添加文字
4.解决清晰度的问题

content.arc(圆点x, 圆点y, 半径, 初始角度0, 结束角度Math.PI) 绘制圆弧;

content.arc(圆点x, 圆点y, 半径, 初试角度0, Math.PI, false); 
上面这个方法是绘制圆弧的。
Math.PI 是180度。
如果初始角度0,结束角度Math.PI是整个圆弧的角度,
默认顺时针false, 逆时针true
content.arc(300, 300, 100,0, Math.PI);
content.stroke();
现在我们绘制了一个圆弧,现在我们来绘制一个圆环

绘制一个圆环(带有线宽)

<body>
  <canvas id="canvas" width="400" height="400">
 </body>
 <script type="text/javascript">
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");  
  // 开始画线
  ctx.beginPath();
  ctx.arc(200,200,100,0, 2*Math.PI);
  // 线宽
  ctx.lineWidth=20;
  // 线的颜色
  ctx.strokeStyle = '#a0a'
  // 绘制形状的轮廓。这个有的小伙伴不太理解。我详细说下。
  ctx.stroke();
 </script>

stroke()的理解

canvas中的stroke()的方法,用于在Canvas上绘制形状的轮廓。
我的理解:当我们使用stroke()方法后。
Canvas会使用当前的线宽、线条样式(如实线、虚线等)以及线条颜色等属性。
沿着之前定义的路径或形状的外边缘进行绘制。
线条会从形状的起点延伸至终点,形成了一个封闭的轮廓。
因此:当我们使用
ctx.lineWidth=20; // 定义线宽
ctx.strokeStyle = '#a0a' // 线的颜色
如果最后不使用 ctx.stroke(); 无法在画笔上进行绘制轮廓

绘制当前的进度

<body>
  <canvas id="canvas" width="400" height="400">
 </body>
 <script type="text/javascript">
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");  
  ctx.beginPath();
  ctx.arc(200,200,100,0, 2*Math.PI);
  // 线宽
  ctx.lineWidth=20;
  // 线的颜色
  ctx.strokeStyle = '#ccc'
  // 绘制形状的轮廓。
  ctx.stroke();
  ctx.beginPath();
  // 当前进度
  let jinDu = 80
  // 占比
  ctx.arc(200,200,100,0, Math.PI / 180 *( 360 * jinDu/ 100));
  // 线宽
  ctx.lineWidth=20;
  // 线的颜色
  ctx.strokeStyle = '#a1a'
  // 绘制形状的轮廓。
  ctx.stroke();
 </script>
</html>

给圆环中间设置文字描述

// 设置位置的位置
ctx.fillStyle='#a1a'; //颜色
ctx.textAlign='center'; // 水平居中
ctx.textBaseline='middle'; // 垂直居中
ctx.fillText(`项目完成进度${jinDu}%`,200,200) // 文字描述

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
4月前
|
前端开发
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
|
6月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
105 2
|
前端开发
canvas绘制五角星
canvas绘制五角星
182 0
|
C# 图形学
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
GDI+中对于圆弧的绘制,是以给定的长方形(Rectangle`结构)为边界绘制的椭圆的一部分形成的圆弧。绘制的圆弧的中心为长方形内切椭圆的圆心(如果是正方形,则正方形的...
611 0
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
Core Animation - 如何来绘制三个圆角一个直角的矩形
Core Animation - 如何来绘制三个圆角一个直角的矩形
77 0
|
前端开发
Canvas绘制圆形头像
Canvas绘制圆形头像
243 0
Canvas绘制圆形头像
|
前端开发
用canvas绘制一个烟花动画
前言 在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶、 3阶) canvas 中绘制贝塞尔曲线 几乎所有前端2D或3D图形图表库(echarts,d3,three.js)都会使用到贝塞尔曲线 所以掌握贝塞尔曲线势在必得。这篇文章主要是实战篇,不会介绍和贝塞尔相关的知识, 如果有同学对贝塞尔曲线不是很清楚的话:可以查看我这篇文章——深入理解SVG 绘制贝塞尔曲线 第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点,一个起点,一个终点。 const canvas = document.getElementById( 'canvas'
用canvas绘制一个烟花动画
|
前端开发 算法 图形学
用canvas绘制一个曲线动画——深入理解贝塞尔曲线
用canvas绘制一个曲线动画——深入理解贝塞尔曲线
869 0
|
前端开发 数据可视化 定位技术
canvas绘制飞线效果
canvas绘制飞线效果
canvas绘制飞线效果