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. PopupWindow 点击外部区域无法关闭的问题

    在android4.0/5.0系统上,使用popupWindow时,点击内容外部区域无法关闭,但是在6.0及以上机子上又是正常的. 加下面这句代码: mPopupWindow.setBackgroun ...

  2. 编译FFMPEG错误对策

    在MINGW32下编译ffmpeg-2.1.1.tar.bz2 step1: ./configure   --prefix=/home/Administrator/install --extra-cf ...

  3. lua编译器和ide

    这里有一个网址,上面记录了大部分流行的LUA开发工具,包括IDE和Editor. http://www.wowwiki.com/Lua_editors 一.Eclipse LDT 1.语法高亮,自动提 ...

  4. DDOS常见攻击类型和防御措施

    DDOS 攻击类型: SYN Flood 攻击 ACK Flood 攻击 UDP Flood 攻击 ICMP Flood 攻击 Connection Flood 攻击 HTTP Get 攻击 UDP ...

  5. [转贴]Linux内核LTS长期支持版生命周期

    Linux内核LTS长期支持版生命周期 https://blog.51cto.com/dangzhiqiang/1894026 搞不懂长期支持版本的特点和区别. 党志强关注0人评论4371人阅读201 ...

  6. Roadmap-学习目标

    自学过一些HTML标签,学的不多也没经常用,但还是比较喜欢前端,希望可以深入学习有用的东西,最后弄一个自己看的过去的博客练练.手.

  7. springmvc默认配置文件

    当在新建的maven web项目的web.xml中直接加入下面的<servlet>和<servlet-mapping>后,直接运行就会出现这个报错,意思就是找不到默认的spri ...

  8. JAVAEE 7 api.chm

    JAVAEE 7 api.chm 链接:https://pan.baidu.com/s/1LUD3oam5B-Hp8tdpfQYk2w 提取码:x1kc

  9. JAVA基础--JAVA API常见对象(字符串&缓冲区)

    一. String 类型 1. String类引入 第二天学习过Java中的常量:   常量的分类:   数值型常量:整数,小数(浮点数) 字符型常量:使用单引号引用的数据 字符串常量:使用双引号引用 ...

  10. PC端微信扫码支付和支付宝跳转支付

    import java.io.BufferedOutputStream; import java.io.BufferedReader; import java.io.IOException; impo ...