javascript - Canvas如何绘制同心圆环
本文介绍了javascript - 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这样的就会不对 是我写的问题吗
解决方案
没时间解释了，看下面的代码
<!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>这篇关于javascript - Canvas如何绘制同心圆环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
