1

我正在尝试绘制几个具有相同属性的圆圈，但 endAngle 不同，我不想将整个圆圈代码写 5 次，有没有办法将大部分代码分配给一个类, 只为 5 个不同的 ID 更改一个变量？

这是两个圆圈

var canvas = document.getElementById('firefox');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(64, 64, 60, 1.5*Math.PI, .3*Math.PI, true);
context.lineWidth = 8;
context.lineCap = "round";
context.strokeStyle = '#c5731e';
context.stroke();

var canvas = document.getElementById('chrome');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(64, 64, 60, 1.5*Math.PI, .9*Math.PI, true);
context.lineWidth = 8;
context.lineCap = "round";
context.strokeStyle = '#c5731e';
context.stroke();

.3*Math.PI 和 .9*Math.PI 是唯一会在圆圈之间改变的东西，我可以用什么方式写上面的内容，这样我就不必全部写 5 次？

4

2 回答 2

3

您不必更改标记，您可以这样做：

['firefox','chrome'].forEach(function(id, index){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(64, 64, 60, 1.5*Math.PI, (index+1)*0.3*Math.PI, true);
    context.lineWidth = 8;
    context.lineCap = "round";
    context.strokeStyle = '#c5731e';
    context.stroke();
});

您不必复制代码或调用函数，只需在数组中添加元素。

如果你不能从索引中推断出角度，那么，

  • 要么你想“硬编码”数据，然后使用一个函数（见其他答案）
  • 或者您想将数据作为数据进行管理。

在后一种情况下，您可以执行以下操作：

 var data = [
   {id:'firefox', angle:33},
   {id:'chrome', angle:43}
 ];
 data.forEach(function(e){
    var canvas = document.getElementById(e.id);
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(64, 64, 60, 1.5*Math.PI, e.angle, true);
    context.lineWidth = 8;
    context.lineCap = "round";
    context.strokeStyle = '#c5731e';
    context.stroke();
});
于 2013-08-10T12:11:54.357 回答
1

创建一个函数，例如；

function drawCanvas(size1, size2, id)
{
   var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.beginPath();
context.arc(64, 64, 60, size1*Math.PI, size2*Math.PI, true);
context.lineWidth = 8;
context.lineCap = "round";
context.strokeStyle = '#c5731e';
context.stroke();
}

叫它五次

于 2013-08-10T12:12:44.377 回答