• canvas画圆又毛边


    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 = 270+angle;
                var ang = ang1/180 * Math.PI;
                var ctx = canvas.getContext("2d");
                //解决毛边
                canvas.width = 120;
                canvas.height = 120;
                //灰色
                ctx.beginPath();
                ctx.lineWidth = 10;
                ctx.strokeStyle = '#ccc'; 
                ctx.arc(60,60,50,0,Math.PI*2);
                ctx.stroke();
    
                ctx.beginPath();
                ctx.lineWidth = 10;
                ctx.strokeStyle = '#6C0'; 
                ctx.arc(60,60,50,Math.PI*1.5,ang);
                ctx.stroke();
            }
            function fun(id,a){
                var b = 0;
                a = Math.round(a*360);
                var set = setInterval(function(){
                    _circle(id,b);
                    b++;
                    if(b === (a+1)){
                        clearInterval(set);
                    }
                },0);
            }
            fun(document.getElementById("circle"),0.8);
            document.getElementById("circle").onmouseenter = function(){
                fun(document.getElementById("circle"),0.8);
            }
        </script>
    </body>
    </html>

    运行后:,这样是不是美观了很多?

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

    canvas.width = 120;
    canvas.height = 120;

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

  • 相关阅读:
    如何保存一张网页上的图片(C#)到本地计算机上
    SQL Server2005常用基本管理操作
    C#保存图片到数据库,读取图片显示
    简析正则表达式
    HDU 变形课
    HDU 1272 小希的迷宫
    HDU 1856 More is better
    POJ 1269 Intersecting Lines
    HDU Football Score
    HDU 1213 How Many Tables
  • 原文地址:https://www.cnblogs.com/cyj7/p/4978472.html
Copyright © 2020-2023  润新知