セミサークルのようなスピードメーターを作成

Question

私は半円のようなスピードメーターを作成しており、すべての色で半円を作成するのに成功しています。以下のデザインを参照してください。

私が直面している問題は、ポインタとして機能する三角形を作成することです。それは300から850の値を中心に移動します。値段がこの範囲に達すると、ここでそれが指摘されます。

JS Fiddle Link

<canvas id="myCanvas" height="350" width="666"> 
       </canvas> 

JS：

window.onload = function(){ 

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 

context.font = "14px Trebuchet MS"; 
context.fillStyle = "#aaaaaa"; 
context.fillText("300", 60, 218); 

context.font = "14px Trebuchet MS"; 
context.fillStyle = "#aaaaaa"; 
context.fillText("850", 280, 218); 

// drawArcShadow x y rad sAng eAng clockwise line fill 
drawArcShadow(180, 200, 100, 0, 180, true, "#eeeeee","white"); 

function drawArcShadow(xPos, yPos, radius, startAngle, endAngle, clockwise, lineColor, fillColor) { 
    var startAngle = startAngle * (Math.PI/180); 
    var endAngle = endAngle * (Math.PI/180); 

    var radius = radius; 

    context.strokeStyle = lineColor; 
    context.fillStyle = fillColor; 
    context.lineWidth = 20; 
    context.beginPath(); 
    context.arc(xPos, yPos, radius, startAngle, endAngle, clockwise); 
    context.fill(); 
    context.stroke(); 
} 

// drawArc x y rad sAng eAng clockwise line fill 
drawArc(180, 200, 110, 0, 180, true, "#c1634a","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 263, true, "#ab5741","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 264, true, "#e59636","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 288, true, "#ce8631","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 289, true, "#e8d932","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 302, true, "#d0c52d","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 303, true, "#aecd9c","rgba(255, 255, 255, 0)"); 
drawArc(180, 200, 110, 0, 320, true, "#8db872","rgba(255, 255, 255, 0)"); 

function drawArc(xPos, yPos, radius, startAngle, endAngle, clockwise, lineColor, fillColor) { 
    var startAngle = startAngle * (Math.PI/180); 
    var endAngle = endAngle * (Math.PI/180); 

    var radius = radius; 

    context.strokeStyle = lineColor; 
    context.fillStyle = fillColor; 
    context.lineWidth = 20; 
    context.beginPath(); 
    context.arc(xPos, yPos, radius, startAngle, endAngle, clockwise); 
    context.fill(); 
    context.stroke(); 
} 

}。

Answer 1

この質問は何度も回答されていますが、コードのロジックにさらに修正が必要だと感じました。

キャンバスのある点を中心にして図形を回転するには、translate(x,y)とrotate(radian)のメソッドを使用します。 まず、コンテキストを回転アンカーポイントに移動し、それに応じて回転させ、最後に再度平行移動して目的のオフセットを与えます。
コンテキストを紙の葉とみなして、移動して回転させることができます。

スニペットで大きなアンチエイリアスアーチファクトが発生しました。これは、すべてのアークが角度0で始まるためです。アークを描くと、ブラウザは半透明のピクセルを作成し、線が滑らかに見えるようにします。しかし、複数のアークを同じ位置に描画すると、これらのピクセルはますます不透明になり、これらの目に見えるアーチファクトにつながります。このうち

var canvas = document.getElementById("myCanvas"); 
 
var context = canvas.getContext("2d"); 
 

 
function drawTriangle() { 
 

 
    var ratio = Math.PI/(slider.max - slider.min); 
 
    var angle = ((slider.value - slider.min) * ratio) + Math.PI; 
 
    var radius = 110; 
 
    // first move our cursor to the center of our arcs 
 
    context.translate(180, 200); 
 
    // then rotate the whole context 
 
    context.rotate(angle); 
 
    // move our cursor to our arc's radius 
 
    context.translate(radius, 0); 
 
    // draw the triangle 
 
    context.fillStyle = 'black'; 
 
    context.beginPath(); 
 
    // this draws the triangle around its center point 
 
    context.lineTo(10, -5); 
 
    context.lineTo(10, 5) 
 
    context.lineTo(-10, 0) 
 
    context.closePath(); 
 
    context.fill(); 
 
    // place back our context's transfrom to its default 
 
    context.setTransform(1, 0, 0, 1, 0, 0); 
 
} 
 

 
function drawArcShadow(xPos, yPos, radius, startAngle, endAngle, clockwise, lineColor, fillColor) { 
 
    var startAngle = startAngle * (Math.PI/180); 
 
    var endAngle = endAngle * (Math.PI/180); 
 

 
    var radius = radius; 
 

 
    context.strokeStyle = lineColor; 
 
    context.fillStyle = fillColor; 
 
    context.lineWidth = 20; 
 
    context.beginPath(); 
 
    context.arc(xPos, yPos, radius, startAngle, endAngle, clockwise); 
 
    context.fill(); 
 
    context.stroke(); 
 
} 
 

 
function draw() { 
 
    // clear the canvas 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    // text 
 
    context.font = "14px Trebuchet MS"; 
 
    context.fillStyle = "#aaaaaa"; 
 
    // since we don't change the properties, no need to tell the browser to do so 
 
    context.fillText("300", 60, 218); 
 
    context.fillText("850", 280, 218); 
 

 
    // drawArcShadow x y rad sAng eAng clockwise line fill 
 
    drawArcShadow(180, 200, 100, 0, 180, true, "#eeeeee", "white"); 
 
    // drawArc x y rad sAng eAng ANTIclockwise line fill 
 
    // be careful, 6th argument of arc() is ANTI-clockwise boolean 
 
    // here I changed all start angle to avoid anti-aliasing artifacts + I removed the transparent fill parameter 
 
    drawArc(180, 200, 110, 263, 180, true, "#c1634a", null); 
 
    drawArc(180, 200, 110, 264, 263, true, "#ab5741", null); 
 
    drawArc(180, 200, 110, 288, 264, true, "#e59636", null); 
 
    drawArc(180, 200, 110, 289, 288, true, "#ce8631", null); 
 
    drawArc(180, 200, 110, 302, 289, true, "#e8d932", null); 
 
    drawArc(180, 200, 110, 303, 302, true, "#d0c52d", null); 
 
    drawArc(180, 200, 110, 320, 303, true, "#aecd9c", null); 
 
    drawArc(180, 200, 110, 0, 320, true, "#8db872", null); 
 

 
    drawTriangle(); 
 
} 
 

 
function drawArc(xPos, yPos, radius, startAngle, endAngle, clockwise, lineColor, fillColor) { 
 
    var startAngle = startAngle * (Math.PI/180); 
 
    var endAngle = endAngle * (Math.PI/180); 
 

 
    context.strokeStyle = lineColor; 
 
    context.fillStyle = fillColor; 
 
    context.lineWidth = 20; 
 
    context.beginPath(); 
 
    context.arc(xPos, yPos, radius, startAngle, endAngle, clockwise); 
 
    // instead of filling transparent, which produces nothing, just don't pass the fillColor parameter and don't call fill(). 
 
    fillColor && context.fill(); 
 
    context.stroke(); 
 
} 
 
slider.oninput = draw; 
 
draw();

<input type="range" id="slider" min="300" max="850"> 
 
<canvas id="myCanvas" height="350" width="666"></canvas>