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

最新推荐文章于 2022-04-25 21:17:16 发布
最新推荐文章于 2022-04-25 21:17:16 发布
阅读量1.8k 收藏
点赞数
分类专栏： canvas

前言
canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 
这里我个人总结了3种实现方法，大家可以参考一下。

方法一：arc()实现画圆
效果：

代码：
<!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>

MakeGreatEffort
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS+canvas动态绘制饼图的方法示例
12-29
本文实例讲述了JS+canvas动态绘饼图的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 完整代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>...
python练习56：画圆
qq_45179618的博客
11-17 564
canvas.pack(expand=YES,fill=BOTH) #没有这个函数，上一步的设置无法生效。参数的作用是让背景可以随屏幕大小伸缩。canvas.create_oval(310 - k,250 - k,310 + k,250 + k, width=1) #画圆。canvas = Canvas(width=800, height=600, bg='yellow' ) #设置背景。mainloop() #画图都有这个，没有这个没有弹窗。
Python tkinter库之Canvas 以圆模拟画圆环
汉阳Hann's Home
04-01 3617
tkinter.Canvas.create_xxx()没有直接圆的函数，可以用等轴的椭圆或360度的弧形代替。本例中用画椭圆函数创建一个以圆心坐标x,y和半径r为自变量的画圆函数 Circle(x,y,r,color) ；希望用它画仿圆环，所有圆心都在另一圆周上，定圆和动圆的半径和稀密程序随机变化： import tkinter as tk import pyautogui as ag from random import * from time import sleep as Delay from m
用36条Python语句实现在Canvas上用拖动鼠标方法画直线、矩形和椭圆(圆)
geng_zhaoying的博客
04-06 2106
实现在Canvas上用拖动鼠标方法画直线、矩形和椭圆。以画矩形为例说明实现基本思路，首先在鼠标单击处创建一个小矩形，鼠标左键按下移动时，用Canvas方法coords移动、放大或缩小这个矩形，鼠标抬起固定这个矩形。
canvas画布，绘制矩形、圆形、渐变色、图片、文字
qq_51066068的博客
04-25 2271
画布 canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现 矩形 绘制矩形的步骤： 1. 取得canvas对象 2. 取得2d上下文（context） 3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽，使用图形上下文对象中..
android canvas 画圆,canvas-圆的绘制
weixin_29798025的博客
05-27 1707
圆可以在数据可视化中作为饼状图基础图形，也是在canvas中必不可少的图形语法：ctx.arc(x, y, radius, startAngle, endAngle, Boolean)圆心坐标: (x, y)半径: radius起始角度: startAngle结束角度: endAngle是否逆时针旋转: false 代表顺时针旋转// 开始绘制路径ctx.beginPath();ctx.lineW...
canvas绘制圆角头像的实现方法
12-09
如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下： 首先， 拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍) let {avatarX, avatarY, avatarW, ...
canvas 如何绘制线段的实现方法
12-14
学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。 基础知识 canvas 的基础知识不算多，主要掌握如何绘制...
Canvas实现动态的雪花效果
08-31
本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
Python tkinter库之Canvas直线画圆和莫尔条纹
汉阳Hann's Home
03-25 3109
import tkinter as tk import pyautogui as ag from time import sleep def Line01(): for j in range(1, 9): tCanvas.delete("all") coord = 5, 5, 635, 360 tCanvas.create_rectangle(coord) for i in range(5, 635, j): ...
C#圆形按钮，非常漂亮动态~~
03-05
好东西一起分享,C#圆形按钮，非常漂亮动态 Button,有源代码和例子，这是网上很少有的，兄弟们快下载呀！
动态画圆 空心 参数 半径
12-28
通过x，y坐标和半径 参数画一个空心圆 可供初学者参考
C#作图，包括圆、圆弧、多边形、曲线、直线、矩形等的应用
08-07
本资源包含完整项目、注释、报告 用C#画出好看的风景图片，这纯属兴趣，既练习了C#作图应用，又陶冶了情操，这是最快最有趣的学习方式！
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
canvas基本操作画圆
yihuoZhou的博客
05-27 3023
用canvas画一个圆     在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆。<!DOCTYPE html> <html> <head> <title>canvas画圆</title> <meta charset="utf-8" description=
3 用python进行OpenCV实战之画图（直线，矩形，圆形）
热门推荐
楼上小宇___home
08-20 5万+
前言在上一节我们通过使用NumPy的数组分割成功的在我们的图像上画了一个绿色的方块，但是如果我们想画一个单一的线条或者圆圈该怎么办呢？NumPy没有提供相关的功能，但是OpenCV提供了相关的函数，在本节就将为大家介绍三个基本的OpenCV画图方法：cv2.line() #1 cv2.rectangle() #2 cv2.circle() #31 画直线和矩形在开始我们用OpenCV画我们的杰作之前
神经网络与量子计算的交叉研究.pptx
最新发布
04-19
神经网络与量子计算的交叉研究.pptx
canvas动态画圆
12-03
以下是使用canvas和JavaScript实现动态画圆的代码示例： ```html <!DOCTYPE html> <title>Canvas动态画圆 canvas { border: 1px solid #000; } <canvas id="myCanvas" width="200" height="200">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值