在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ canvas 有多個一樣的圓形，怎么精簡javascript

canvas 有多個一樣的圓形，怎么精簡javascript

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

三個圓形都是一樣的，怎么精簡？ 各位小哥哥小姐姐求指教

回答
編輯回答
厭遇

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();

}
//用的時候調(diào)用就行了
drawArc("myCanvas1");
drawArc("myCanvas2");
drawArc("myCanvas3");

2017年2月9日 05:08