Canvas如何绘制同心圆环

这个是最后的效果即没有同心
我写的旋转部分

window.onload = function () {
    var canvas = document.createElement("canvas");
    document.getElementsByClassName("box")[0].appendChild(canvas);
    canvas.setAttribute("class", "img-1");
    canvas.setAttribute("width", "250px");
    canvas.setAttribute("height", "250px");

    draw(0.3, 125, 240, 2.8, 4.2, 5);

    canvas = document.createElement("canvas");
    document.getElementsByClassName("box")[0].appendChild(canvas);
    canvas.setAttribute("class", "img-1");
    canvas.setAttribute("width", "250px");
    canvas.setAttribute("height", "250px");
    draw(0.4, 125, 240, 0.6, 1.4, 5);

    canvas = document.createElement("canvas");
    document.getElementsByClassName("box")[0].appendChild(canvas);
    canvas.setAttribute("class", "img-2");
    canvas.setAttribute("width", "230px");
    canvas.setAttribute("height", "230px");
    draw(0.6, 115, 220, 0.8, 2.1, 5);

    function draw(alpha, frame, radius, start, end, line) {
        var context = canvas.getContext("2d");
        context.beginPath();
        context.strokeStyle = "#2BA3ED";
        context.lineCap = "square";
        context.globalAlpha = alpha;
        context.closePath();
        context.fill();
        context.lineWidth = line;
        context.putImageData(context.getImageData(0, 0, radius, radius), 0, 0);
        context.beginPath();
        context.arc(frame, frame, radius / 2, start, end, false);
        context.stroke();
    }
}

这里是绘制的所有代码
综上我最后无法绘制出正确的效果，反复查验没有数值错误，是有什么我忽略的东西吗？

2017-7-31
我发现就像是250px这一环或者115这样的就会不对是我写的问题吗

javascript html

html5 css canvas

阅读 8.3k

2 个回答

热饭班长

✓ 已被采纳

没时间解释了，看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .img{
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    

<script>
window.onload = function () {
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    
    
    canvas.setAttribute("class", "img");
    canvas.setAttribute("width", "300px");
    canvas.setAttribute("height", "300px");


    draw(0.3, 125, 100, 2.8, 4.2, 5);

    canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("class", "img");
    canvas.setAttribute("width", "300px");
    canvas.setAttribute("height", "300px");
    draw(0.4, 125, 150, 0.6, 1.4, 5);

    canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("class", "img");
    canvas.setAttribute("width", "300px");
    canvas.setAttribute("height", "300px");
    draw(0.6, 125, 200, 0.8, 2.1, 5);

    function draw(alpha, frame, radius, start, end, line) {
        var context = canvas.getContext("2d");
        context.beginPath();
        context.strokeStyle = "#2BA3ED";
        context.lineCap = "square";
        context.globalAlpha = alpha;
        context.closePath();
        context.fill();
        context.lineWidth = line;
        context.putImageData(context.getImageData(0, 0, radius, radius), 0, 0);
        context.beginPath();
        context.arc(frame, frame, radius / 2, start, end * Math.PI, false);
        context.stroke();
    }
}
</script>
</body>
</html>