Canvas三种动态画圆实现方法说明

最新推荐文章于 2024-01-20 14:53:00 发布
最新推荐文章于 2024-01-20 14:53:00 发布
阅读量9.3k 收藏 12
点赞数 1
分类专栏： canvas 文章标签： canvas 动态画圆 进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csm17805987903/article/details/85044012
版权

前言
canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 以下是三种实现方法：

方法一：arc()实现画圆
通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。

相关函数：

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

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
  //方法一：arc 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

方法二：rotate() 动态画圆

通过重新定义圆点坐标为（0，0），然后通过在规定范围内旋转图形，进行单点绘制。
相关函数：

context.translate(x,y);

在这里插入图片描述

context.rotate(angle);

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
  //方法二：rotate() 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.translate(r, r); //重定义圆点
    ctx.rotate(-Math.PI); //最上方为起点
    for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
      ctx.moveTo(0, cR - lineWidth);
      ctx.lineTo(0, cR);
      ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

方法三：获取圆坐标方式 动态画圆
通过sin() 和 cos()按一定的角度偏移量，将开始角度和结束角度之间的坐标位置存于数组中，然后按照数组中的坐标点进行绘制。

关于坐标点的计算，设计到了一些数学知识，说明图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
  //方法三：获取圆坐标方式 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 2 * (Math.PI / 180); //偏移角度量
  var cArr = []; //圆坐标数组

  //初始化圆坐标数组
  for(var i = startAngle; i <= endAngle; i += xAngle){
    //通过sin()和cos()获取每个角度对应的坐标
    var x = r + cR * Math.cos(i);
    var y = r + cR * Math.sin(i);

    cArr.push([x, y]);
  }

  //移动到开始点
  var startPoint = cArr.shift();
  ctx.beginPath();
  ctx.moveTo(startPoint[0], startPoint[1]);

  //渲染函数
  var rander = function(){
    //画圈
    if(cArr.length){
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = '#1c86d1';    

      var tmpPoint = cArr.shift();
      ctx.lineTo(tmpPoint[0], tmpPoint[1]);

      ctx.stroke();      
    }else{
      cArr = null;
      return;
    }

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>
遇见csm
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript canvas绘制圆角矩形.html
12-22
Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象的“子级”。
canvas 如何绘制线段的实现方法
12-14
学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。 基础知识 canvas 的基础知识不算多，主要掌握如何绘制线段，图形，图片，文本等。canvas可以在浏览器中绘制，也可以借助 node-canvas在node服务端绘制简单的图片。本文只记录在浏览器中绘制，至于在node端如何绘制，自己可以去查看相关资料。 在浏览器中绘制，就先在html中定义canvas元素，默认宽高是300 * 150，可以通过width和height设置。注意canvas元素样式宽高和canvas绘图画布宽高不是一个
canvas画圆形图
最新发布
assassin_0302的博客
01-20 433
createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
JS+canvas动态绘制饼图的方法示例
12-29
本文实例讲述了JS+canvas动态绘饼图的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 完整代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net canvas饼状图</title> </head> <body> <canvas id=canvas width=800 height=600 xss=removed></canvas> </body> [removed] var colors = (func
Canvas实现动态的雪花效果
08-31
本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas绘制圆角头像的实现方法
12-09
如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下： 首先， 拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍) let {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80}; 然后 只需要调用以下函数即可： let Canvas = document.createElement('canvas'); let ctx = Canvas.getContext("2d"); let avatar = new Image(); avatar.src = '../src/xx.png
Canvas实现动态绘制圆周效果|实现奥运五环
李桥桉的博客
04-22 1781
一、canvas简介是一个h5新增的标签 表示画布 是一个不需要其他三方操作 原生的必须通过js来对其画布进行构图 canvas本身是一个容器 js是一个画笔canvas有两个重要的属性 width heightcanvas应用很多 验证码 图表操作 截屏 手写板 (签合同)。。。
canvas画圆
编程界明世隐的博客
01-14 1万+
画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 实例1 window.onload=function(){ var canvas = document.get
使用 JavaScript 绘制圆
m0_63639281的博客
09-05 3730
使用 JavaScript 绘制圆
canvas绘制一个圆形
qq_51196135的博客
03-07 2251
canvas画布，绘制矩形、圆形、渐变色、图片、文字
qq_51066068的博客
04-25 2269
画布 canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现 矩形 绘制矩形的步骤： 1. 取得canvas对象 2. 取得2d上下文（context） 3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽，使用图形上下文对象中..
js+html5实现canvas绘制圆形图案的方法
10-24
主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下
canvas绘制圆
qq_21277357的博客
01-01 36
【代码】canvas绘制圆。
js canvas如何实现圆角图片头像
于忠会的博客
01-02 371
imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API`//只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源。ctx.drawImage(img1, 0, 0, 608, 1080) //画布上先绘制背景图`// 对象 - 半径 - x轴距离 一y轴距离 -头像宽度 - 头像高度 -图片地址。// 画圆形头像方法。
canvas-绘制圆形
nicecode
07-27 5173
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
如何利用canvas画一个圆，并且填充颜色
热门推荐
Jacgu的博客
05-27 2万+
如何利用canvas画一个圆，并且填充颜色（小白专用，大佬勿看） canvas基础 相信在此之前，你对canvas已经有一定的了解了，接下来我将介绍，如何利用canvas画一个圆。 1、新建一个html模板，我用的编辑环境是Visual Studio Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
使用canvas绘制圆形，扇形
m0_62052306的博客
07-08 451
hello，我是小九，今天我们来使用Canvas绘制圆形，扇形。
canvas学习笔记（画圆）
yuanyuan_HTML的博客
05-20 328
canvas是html5标签，用来绘制图像。该标签是容器，我们通过js脚本来绘制图形。 <canvas>的简单实例（画个圆，面试遇到过)： 1.首先我们在body中声明一个canvas <canvas id="yuan" width="200px" height="200px"></canvas> 2.然后通过js来绘制圆形 var x=document.getElementById("yuan") var y=x.getContext("2d") y
如何使用canvas绘制圆形
kobe_back的博客
06-03 5807
Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。 我们利用canvas可以绘制出下图： 在绘制上图之前，我们先来看下相关知识点： 一、 开始创建路径 使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。 这个方法不设置参数，通过调用这个方
canvas动态画圆
12-03
以下是使用canvas和JavaScript实现动态画圆的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas动态画圆</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var endPercent = 101; var curPerc = 0; var counterClockwise = false; var circ = Math.PI * 2; var quart = Math.PI / 2; context.lineWidth = 10; context.strokeStyle = '#ad2323'; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 10; context.shadowColor = '#656565'; function animate(current) { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); context.stroke(); curPerc++; if (curPerc < endPercent) { requestAnimationFrame(function () { animate(curPerc / 100) }); } } animate(); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值