canvas 有多个一样的圆形,怎么精简javascript

爱许乐
  • 179
<canvas id="myCanvas1" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas2" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas3" class="roundness" width="300" height="300"></canvas>

<script>
    
    var context1=document.getElementById("myCanvas1");
    var context2=document.getElementById("myCanvas2");
    var context3=document.getElementById("myCanvas3");
    var ctx1=context1.getContext("2d");
    var ctx2=context2.getContext("2d");
    var ctx3=context3.getContext("2d");
    ctx1.lineWidth = 2;//线条的宽度
    ctx2.lineWidth = 2;//线条的宽度
    ctx3.lineWidth = 2;//线条的宽度
    ctx1.strokeStyle = "#b81113";//线条的颜色
    ctx2.strokeStyle = "#b81113";//线条的颜色
    ctx3.strokeStyle = "#b81113";//线条的颜色
    ctx1.beginPath();
    ctx2.beginPath();
    ctx3.beginPath();
    ctx1.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx2.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx3.arc(100,100,94,1.4*Math.PI,1*Math.PI);
    ctx1.stroke();
    ctx2.stroke();
    ctx3.stroke();

</script> 

三个圆形都是一样的,怎么精简? 各位小哥哥小姐姐求指教

回复
阅读 2.2k
1 个回答

function drawArc(id){
var context=document.getElementById(id);
var ctx=context.getContext("2d");

ctx.lineWidth = 2;//线条的宽度
ctx.strokeStyle = "#b81113";//线条的颜色
ctx.beginPath();
ctx.arc(100,100,94,1.4*Math.PI,1*Math.PI);
ctx.stroke();

}
//用的时候调用就行了
drawArc("myCanvas1");
drawArc("myCanvas2");
drawArc("myCanvas3");

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