canvas使用arc()画园有毛边，如图：，只需给其添加width，height即可，直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆形</title>

</head>

<body>

    <canvas class="can-circle" id="circle"></canvas>

    <script type="text/javascript">

        function _circle(canvas,angle){

            var ang1 = +angle;

            var ang = ang1/ * Math.PI;

            var ctx = canvas.getContext("2d");

            //解决毛边

            canvas.width = ;

            canvas.height = ;

            //灰色

            ctx.beginPath();

            ctx.lineWidth = ;

            ctx.strokeStyle = '#ccc';

            ctx.arc(,,,,Math.PI*);

            ctx.stroke();

            ctx.beginPath();

            ctx.lineWidth = ;

            ctx.strokeStyle = '#6C0';

            ctx.arc(,,,Math.PI*1.5,ang);

            ctx.stroke();

        }

        function fun(id,a){

            var b = ;

            a = Math.round(a*);

            var set = setInterval(function(){

                _circle(id,b);

                b++;

                if(b === (a+)){

                    clearInterval(set);

                }

            },);

        }

        fun(document.getElementById("circle"),0.8);

        document.getElementById("circle").onmouseenter = function(){

            fun(document.getElementById("circle"),0.8);

        }

    </script>

</body>

</html>

运行后：，这样是不是美观了很多？

看上面代码可知，解决毛边的主要两句代码是：

canvas.width = ;

canvas.height = ;

此width\height可以任意设置，只是为了美观，不遮盖其他文件即本身现实才都设置为了120px。注意，此处width\height的单位不用添加，默认是px。

canvas画圆又毛边的更多相关文章

  1. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  2. canvas画圆类似于锯齿指针 angular5

    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...

  3. canvas画圆百分比显示

    代码如下,由于canvas还是不太熟悉,还有很多欠缺,希望大家多提意见,谢谢 function DrawArc(id,opations){ this.canvas = document.getElem ...

  4. canvas画圆（一）

    仿第一次效果

  5. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  6. canvas 绘圆加边框

    HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...

  7. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  8. canvas练习 - 圆

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas 画椭圆

    圆的标准方程(x-x0)²+(y-y0)²=r²中,有三个参数x0.y0.r,即圆心坐标为(x0, y0), 半径为 r圆的参数方程 x = x0 + r * cosθ, y = y0 + r * s ...

随机推荐

  1. numpy的logspace产生等比数列

    转载至:https://blog.csdn.net/shenpengjianke/article/details/29356755 上一篇介绍了numpy.linspace用于创建等差数列,现在介绍l ...

  2. Linux 操作命令简

    一.Linux命令及获取帮助 1.Linux命令的格式1)了解Linux命令的语法格式:命令 [选项] [参数]2)掌握命令格式中命令.选项.参数的具体含义a)命令:告诉Linux(UNIX)操作系统 ...

  3. 华为HCNA乱学Round 8：生成树

  4. 【Qt开发】关于Qt应用程序中的堆栈、静态存储区的使用错误

    [Qt开发]关于Qt应用程序中的堆栈.静态存储区的使用错误 标签:[Qt开发] 最近终于又碰到了这个问题,想在main函数中定义一个局部大的数组,结果运行就报错,尼玛!刚开始真的不知道到发生了什么,后 ...

  5. 【linux杂谈】centos6和centos7中固定IP的方法

    众所周知,一大部分集合部署的应用服务器内网相互通信都是采用固定IP.在阿里云.腾讯云上申请的云服务器也是固定IP,这就意味着在云平台内部策略划拨肯定是也固定了IP(即便不是采取直接在系统内固定的方式) ...

  6. Angular中引入外部js的使用方式

    在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做 ...

  7. adb工具介绍与安装

    一天笑嘻嘻是一名测试人员,想了解Android的测试方法,于是,就找到了小测试. 笑嘻嘻:身为一名测试人员需要了解ADB的哪些内容? 小测试:了解原理和简单的命令使用就可以了. 笑嘻嘻:你有毒啊,都了 ...

  8. jump用户管理命令

    ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa手动拷贝id_rsa.pub的内容到其他机器 或者用 ssh-copy,但你得知道对方root密码 ssh-copy-i ...

  9. ssh配置互信不成功，两台服务器有一台需要输入密码

    在客户现场,某国产平台,配置机器互信时发现,A可以免密访问B,而B不能免密访问A,且B不能免密访问B,进行了下面的几个处理后搞定. 1)确定目录权限:/root/ 755/root/.ssh 700/ ...

  10. Wizard's Tour CodeForces - 860D (图,构造)

    大意: 给定$n$节点$m$条边无向图, 不保证连通, 求选出最多邻接边, 每条边最多选一次. 上界为$\lfloor\frac{m}{2}\rfloor$, $dfs$贪心划分显然可以达到上界. # ...