canvas 环形图绘制

更新日期: 2019-06-03阅读: 2.5k标签: canvas

主要用到几个知识点

1、lineCap:如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt(线段末端以方形结束), round (线段末端圆形结束)and square(线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)。默认值是 butt。 


2、圆弧起始点与结束点的设置


在本里中设置方式   ctx.arc(110, 110, 100, 0.75 * Math.PI, 0.75 * Math.PI + step * 1.5 * Math.PI, false); // false 是顺时针  


3、LinearGradient的使用方法

完整的代码如下 

    <div class="container">
        <div class="progress_box">
            <!-- 一定要设置width 和 height 否则图形会变形 -->
            <canvas id="progress_bg" width="220" height="220"></canvas>
            <canvas id="progress_canvas" width="220" height="220"></canvas>
            <div class="progress_text" id="progress_text">正在加载中...</div>
        </div>
    </div>
    <style>
    .progress_box {
        position: relative;
        width: 220px;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #140c33;
    }

    #progress_bg {
        position: absolute;
        width: 220px;
        height: 220px;
    }

    #progress_canvas {
        width: 220px;
        height: 220px;
        z-index: 1;
    }

    .progress_text {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ddd;
    }

    .progress_info {
        font-size: 20px;
        padding-left: 16px;
        letter-spacing: 2px;
    }

    .progress_dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fb9126
    }
    </style>
    <script>
    function drawProgressBg() {
        var canvas = document.getElementById("progress_bg");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#20183b";
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
        ctx.stroke();
    }
    drawProgressBg()

    function drawCircle(step) {
        var canvas = document.getElementById("progress_canvas");
        var ctx = canvas.getContext("2d");
        var gradient = ctx.createLinearGradient(200, 100, 100, 200);
        gradient.addColorStop(0, "#2661DD");
        gradient.addColorStop(0.5, "#40ED94");
        gradient.addColorStop(1.0, "#5956CC");
        ctx.lineWidth = 10;
        ctx.strokeStyle = gradient;
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.arc(110, 110, 100, 0.75 * Math.PI, 0.75 * Math.PI + step * 1.5 * Math.PI, false); // false 是顺时针
        ctx.stroke();
    }
    //drawCircle()

    function countInterval() {
        var count = 0
        var counterTimer = setInterval(function() {
            if (count <= 60) {
                this.drawCircle(count / 60)
                count += 2;
            } else {
                var text = document.getElementById("progress_text")
                text.innerhtml = "加载完成"
                clearInterval(counterTimer)
            }
        }, 100)
    }
    countInterval()
    </script>

注意:一定要设置 Canvas 的 width 和 height 否则图形会变形。

链接: https://www.fly63.com/article/detial/4009

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!