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. Eclipse新建新的工作空间，将原有的配置全部或部分复制

    1.部分复制 File->Switch workspace->Other...,按下图选择 只复制简单的配置,如cvs之类的信息是不会复制的. 2.全部复制(build path) 在1. ...

  2. sqlalchemy一对多的关系

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...

  3. php导出excel方法： 所有语言通用

    后端: //导出if($_GPC['export']==1){  $list_export = pdo_fetchall($sql.$where);  include $this->templa ...

  4. （4.15）mysql备份还原——物理备份之XtraBackup的下载与安装

    关键词:mysql物理备份,XtraBackup,XtraBackup安装,XtraBackup下载 实践链接:https://www.cnblogs.com/gered/p/11147193.htm ...

  5. [Codeforces 266E]More Queries to Array...(线段树+二项式定理)

    [Codeforces 266E]More Queries to Array...(线段树+二项式定理) 题面 维护一个长度为\(n\)的序列\(a\),\(m\)个操作 区间赋值为\(x\) 查询\ ...

  6. 使用zookeeper报错 stat is not executed because it is not in the whitelist. envi is not executed because it is not in the whitelist.

    在使用四字命令或者zk ui界面查看zookeeper集群时,出现如下提示: stat is not executed because it is not in the whitelist. envi ...

  7. iview发布到IIS 路由问题

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  8. Chrome开发者工具详解（一）之使用断点来调试代码上

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断 ...

  9. 部署Dashboard，监控应用

    部署web UI(dashboard)用于监控node资源 参见文档:https://blog.csdn.net/networken/article/details/85607593 官网:https ...

  10. css3实现div自动左右动

    <!DOCTYPE html> <meta charset="UTF-8"/> <html> <head> <style> ...