Canvas如何绘制同心圆环

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

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这样的就会不对 是我写的问题吗

阅读 8.3k
2 个回答

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

clipboard.png

<!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>

需要看到详细的代码,尤其是样式定义,感觉问题出在样式上。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题