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. PJzhang:微软出口管制条例

    猫宁!!! 翻译:PJzhang 微软公司的技术,产品和服务受美国出口管理法规(EAR)的约束,由美国商务部工业与安全局(BIS)监督执行. 此外,财政部,国务院对其他与出口相关的技术和产品转让,交易 ...

  2. selenium—alert用法

    切换到弹框: switch_to_alert() ① alert.accept()  确认弹框 driver.switch_to_alert().accept() ② alert.dismiss() ...

  3. flask_migrate 的应用

    怎么查看的命令: python manage.py --help 使用flask_migrate的注意事项:

  4. BUUOJ reverse 不一样的flag

    不一样的flag 是不是做习惯了常规的逆向题目?试试这道题,看你在能不能在程序中找到真正的flag!注意:flag并非是flag{XXX}形式,就是一个’字符串‘,考验眼力的时候到了! 注意:得到的 ...

  5. mapreduce运行的bug收录

    在8088端口可以看到日志文件(主要看error),操作如下: 1.window jdk版本最好和linux jdk 版本一致,不然容易出现莫名奇妙的bug 之前出现一个bug: Unsupporte ...

  6. 下载安装npm和cnpm

    下载安装npm http://nodejs.cn/download/ 下载安装cnpm 完成npm的安装后,再安装cnpm https://npm.taobao.org/ 切换源为 taobao 源 ...

  7. python_0基础开始_day12

    第十二节 一,生成器 生成器的核心:生成器的本质就是迭代器 迭代器是python自带的 生成器是程序员自己写的一种迭代器 在python中有三种方式来创建生成器: 基于函数编写 推导式方式编写 pyt ...

  8. Python_4day

    函数 函数可以用来定义可重复代码,组织和简化 一般来说一个函数在实际开发中为一个小功能 一个类为一个大功能 同样函数的长度不要超过一屏   Python中的所有函数实际上都是有返回值(return N ...

  9. JAVA文件类工具

    FileUtil package cn.jiangzeyin.util.file; import org.springframework.util.Assert; import java.io.*; ...

  10. Redis 高可用之哨兵模式（二）

    上一篇实际操作过程中遇到两个问题 问题一:虽然运行了3个sentinel容器,实际上只有一个sentinel运行 问题出现的原因很简单,三个sentinel用的是同一个挂载配置文件,容器内部的更改直接 ...