canvas，动态画圆

最新推荐文章于 2023-03-29 14:15:59 发布
最新推荐文章于 2023-03-29 14:15:59 发布
阅读量307 收藏
点赞数
分类专栏： js 框架 文章标签： html5
原文链接：https://blog.csdn.net/lecepin/article/details/53454396
版权
js 同时被 2 个专栏收录
50 篇文章 1 订阅
订阅专栏
框架
4 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        /*S 画圆*/
        .cell{
            width: 66px;
            height: 66px;
            margin-top:2px ;
            margin-left:12px ;
            margin-right:12px ;
            position: relative;
            float: left;
        }
        .canvas-pic{
            position: absolute;
            width: 37px;
            height: 37px;
            left: 14px;
            top: 15px;
        }
        .canvas-speed{
            position: absolute;
            left: 14px;
            top: 6px;
            font-weight: 600;
            color: #197efb;
            -webkit-background-clip: text;
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#1c87fb), to(#197efb));
            -webkit-text-fill-color: transparent;
        }
        .myCanvas{
            position: absolute;
            margin: 0 auto;
            display: block;
        }
        /*E 画圆*/
    </style>
    <body>
        <div class="cell">
            <canvas class="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
            <img src="https://csdnimg.cn/medal/chizhiyiheng@240.png" class="canvas-pic"/>
            <p class="canvas-speed"></p>
        </div>
        <div class="cell">
            <canvas class="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
            <img src="https://csdnimg.cn/medal/chizhiyiheng@240.png" class="canvas-pic"/>
            <p class="canvas-speed"></p>
        </div>
    </body>
</html>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var ctx = [];
var num = [];
var rander = [];
run();
function run(){
    $(".cell").each(function(i, item){
        var c = $(this).find(".myCanvas");
        console.log(c.get(0).getContext("2d"));
        ctx[i] = c.get(0).getContext("2d");
        var mW = c.width = 66;
        var mH = c.height = 66;
        var lineWidth = 3;
        var r = mW / 2; //中间位置
        //var cR = r - 4 * lineWidth; //圆半径
        var cR = 30; //圆半径
        var startAngle = -(1 / 2 * Math.PI); //开始角度
        var endAngle = startAngle + 2 * Math.PI; //结束角度
        var xAngle = 5 * (Math.PI / 180); //偏移角度量
        var fontSize = 12; //字号大小
        var tmpAngle = startAngle; //临时角度变量
        //渲染函数
        rander[i] = function(){
            if (tmpAngle >= endAngle) {
                return;
            } else if (tmpAngle + xAngle > endAngle) {
                tmpAngle = endAngle;
            } else {
                tmpAngle += xAngle;
            }
            ctx[i].clearRect(0, 0, mW, mH);
            //画圈
            ctx[i].beginPath();
            ctx[i].lineWidth = lineWidth;
            var gradient=ctx[i].createLinearGradient(0,0,170,0);
            gradient.addColorStop("0","magenta");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("1.0","red");
            ctx[i].strokeStyle = gradient;
            ctx[i].arc(r, r, cR, startAngle, tmpAngle);
            ctx[i].stroke();
            ctx[i].closePath();

            //写字
            num[i] = Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100);
            $(".canvas-speed").html(num[i] + '%');
            requestAnimationFrame(rander[i]);
        }
        rander[i]();
    });
}
</script>

张张的技术贴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-绘制圆形
nicecode
07-27 5224
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
android canvas 画圆,canvas-圆的绘制
weixin_29798025的博客
05-27 1725
圆可以在数据可视化中作为饼状图基础图形，也是在canvas中必不可少的图形语法：ctx.arc(x, y, radius, startAngle, endAngle, Boolean)圆心坐标: (x, y)半径: radius起始角度: startAngle结束角度: endAngle是否逆时针旋转: false 代表顺时针旋转// 开始绘制路径ctx.beginPath();ctx.lineW...
vue实现canvas画布上动态画一个渐变圆环
m0_61339009的博客
03-29 927
这是我自己的一些理解和方法，按这个demo可以自己理解并且完成一些简单的绘画。画布上一个环形的渐变简单动画。从中理解画布的原理和使用方法。
canvas绘制圆形简明教程
Hiroshi's
03-01 1427
画直线图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas
如何使用canvas绘制圆形
kobe_back的博客
06-03 5849
Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。 我们利用canvas可以绘制出下图： 在绘制上图之前，我们先来看下相关知识点： 一、 开始创建路径 使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。 这个方法不设置参数，通过调用这个方
html5 canvas鼠标为圆心任意画圆特效
11-06
html5 canvas鼠标为圆心任意画圆特效 html5 canvas鼠标为圆心任意画圆特效
HTML5 Canvas圆点发光特效特效代码
03-20
HTML5 Canvas是HTML5的一个重要特性，它允许开发者在网页上进行动态图形绘制，提供了丰富的图形操作接口。在这个“HTML5 Canvas圆点发光特效特效代码”中，我们主要探讨的是如何利用Canvas API来创建一个绿色的圆点...
canvas light.rar
05-03
Canvas API提供了丰富的绘图方法，如`fillRect()`用于画矩形，`beginPath()`和`stroke()`用于路径绘制，`arc()`用于画圆或弧线，以及`clearRect()`用于清除指定区域等。通过这些API，开发者可以构建出各种动态效果。...
android画圆示例
09-15
Paint paint = new Paint(); paint.setColor(Color.RED); int width_dp = 10; int width_px = UIUtils.dip2Px(width_dp);... canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
利用html5 canvas动态画饼状图的示例代码
01-19
canvas画圆大体分为实心圆和空心圆。 根据需求分析知道该圆为实心圆。 1.先用canvas画实心圆 //伪代码 var canvas = document.createElement(canvas); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx....
html5动态画圆（可根据此方法动态处理其他图形）
08-09
在鼠标移动时生成图形，就像QQ截图的椭圆工具
Canvas三种动态画圆实现方法说明
记得笑的博客
12-17 9446
前言 canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 以下是三种实现方法： 方法一：arc()实现画圆 通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。 相关函数： context.arc(x,y,r,sAngle,eAngle,counterclo...
使用 canvas 画圆
雾里看花叹朦胧
12-25 666
使用原生的 HTML5 和 JS ，在屏幕中动态生成随机的 50 个小圆：arc()画圆弧的方法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)其中最后一个参数是可选的，true=逆时针，false =顺时
canvas实现动态圆
happyjeepAway的博客
07-03 661
function cirleShow(num) {      var canvas = $api.byId('canvas');    //画布的位置，div      context = canvas.getContext('2d');      centerX = canvas.width/2;            //圆的位置      centerY = canvas.height/2;...
canvas动态圆
Mua7758的博客
08-08 142
<style type="text/css"> #myCanvas{ margin: 0 auto; display: block; } </style> 安安真帅，当前浏览器不支持canvas组件请升级！ //脚本语言开始 //方法一：arc 动态画圆 var c = document.getElementById(‘myCanvas’); var ctx = c.getContext(‘2d’); var mW = c.width = 500;
canvas 动态画圆笔记二
weixin_34293141的博客
09-14 117
function DrawCircle (opts) { var node = opts.node if (!node) return console.log('ERROR: ', 'node is undefined') if (!this instanceof DrawCircle) return new DrawCircle(opts) this.o...
canvas绘制动态加载圆形百分比
sweetllh的博客
07-29 2009
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <canvas width="152" height="152" id="process"></canvas>
canvas画圆形图片
沫沫酱
05-02 7878
效果图：实现环境在微信小程序中参考网站https://www.jianshu.com/p/9a6ee2648d6f先封装circleImg（）方法 circleImg: function (ctx, img, x, y, r){ ctx.save(); var d = 2 * r; var cx = x + r; var cy = y + r; ctx.beginP...
小程序canvas画入圆形图片
jenkinz的博客
11-20 6119
一般情况下画入圆形图片 canvas.save(); canvas.beginPath() //开始创建一个路径 canvas.arc(50, 50, 50, 0, 2 * Math.PI, false) //画一个圆形裁剪区域 canvas.clip() //裁剪 canvas.drawImage("../../images/123.png", 0, 0, 100, 100) //绘制...
canvas动态画圆
最新发布
12-03
以下是使用canvas和JavaScript实现动态画圆的代码示例： ```html <!DOCTYPE html> <title>Canvas动态画圆 canvas { border: 1px solid #000; } <canvas id="myCanvas" width="200" height="200">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值