这个是最后的效果 即没有同心
我写的旋转部分
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这样的就会不对 是我写的问题吗
没时间解释了,看下面的代码