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. /etc/passwd字段信息

    root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nol ...

  2. python pandas dataframe 读取和写入Oracle

    1.代码:主要写入时表要为小写,否则报错 Could not reflect: requested table(s) not available in Engine from sqlalchemy i ...

  3. mysql——操作数据库

    一.查看数据库 show databases; 二.创建数据库 create database 数据库名; 三.删除数据库 drop database 数据库名; 四.查看数据库存储引擎 show e ...

  4. Chrome的cookie放在哪里了，Cookie/Session机制详解

    Chrome的cookie放在哪里了,Cookie/Session机制详解:https://blog.csdn.net/u010002184/article/details/82082951

  5. 解决WordPress百度分享图标不显示问题

    最近在帮朋友维护博客时,发现他的百度分享居然不能使用了,首先很多人会认为,百度分享挂在那里就是一种摆设,又没有几个人去分享,有什么含义呢?其实挂百度分享的含义是非常重要的,网站增加一个百度分享是可以增 ...

  6. Linux内核、mysql内核、Tcp/Ip内核、java等知识书籍

    LINUX <linux内核设计与实现>(2011年出版,链接:https://pan.baidu.com/s/107hriLNVt05A8egeU8Du-g  密码:0cgn) < ...

  7. luogu题解 P1099 【树网的核】树的直径变式+数据结构维护

    题目链接: https://www.luogu.org/problemnew/show/P1099 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...

  8. php过滤微信昵称中的表情

    function filterNickname($nickname) { $nickname = preg_replace('/[\x{1F600}-\x{1F64F}]/u', '', $nickn ...

  9. Action注入错误

    2016-07-13 13:52:09,584 [ERROR]-[com.opensymphony.xwork2.util.logging.commons.CommonsLogger:38] Exce ...

  10. js之运算符（算术运算符）

    Javascript中的运算符大多是由标点符号少数由关键字表示.可以根据其操作数的个数进行分类.大多数运算符是一个二元运算符,将两个表达式合成一个比较复杂的表达式.还有需要注意的一点是运算符的优先级, ...