javascript - 用厚底和薄顶的线画线-车速表针

我有一个问题:我需要在车速表上画一个针。我在JS中使用简单的Line Function来绘制线/针。我希望我的针头从根部开始变粗，从尖端到底部变细，如下所示。请告知如何在JavaScript中绘制此类针。所需针和当前针如下。

线路代码:

function drawNeedle(options) {
/* Draw the needle  at the
* angle that represents the options.speed value.
*/

var iSpeedAsAngle = convertSpeedToAngle(options),
    iSpeedAsAngleRad = degToRad(iSpeedAsAngle),
    gaugeOptions = options.gaugeOptions,
    innerTickX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * 10),
    innerTickY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * 10),
    fromX = (options.center.X - gaugeOptions.radius) + innerTickX,//+ innerTickX ,// /2,
    fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY ,//+ innerTickY, // /2,
    endNeedleX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * gaugeOptions.radius),//+40,
    endNeedleY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * gaugeOptions.radius),//+60, // controlled height of nedle
    toX = (options.center.X - gaugeOptions.radius) + endNeedleX,
    toY = (gaugeOptions.center.Y - gaugeOptions.radius) + endNeedleY,

   line = createLine(options.center.X + 80, options.center.Y + 60, toX+75, toY+60, "rgb(3,2,245)", 5, 0.6);  //80.60.75.65

// line = createLine(fromX, fromY, toX, toY, "rgb(3,2,245)", 5, 0.6);

drawLine(options, line);

}

drawLine函数

function drawLine(options, line) {

// Draw a line using the line object passed in
options.ctx.beginPath();

// Set attributes of open
options.ctx.globalAlpha = line.alpha;
options.ctx.lineWidth = line.lineWidth;
options.ctx.fillStyle = line.fillStyle;
options.ctx.strokeStyle = line.fillStyle;
options.ctx.moveTo(line.from.X,
    line.from.Y);

// Plot the line
options.ctx.lineTo(
    (line.to.X),
    line.to.Y
);

options.ctx.stroke();

}

最佳答案

以下是绘制针规的方法:

转换到量表的中心

旋转到指定 Angular

将针画成三角形

旋转相同的指定 Angular

通过中心坐标取消平移。

示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var degrees=-90;
var radians=degrees*Math.PI/180;

$myslider=$('#myslider');
$myslider.attr({min:-180,max:0}).val(degrees);
$myslider.on('input change',function(){
    var degrees=parseInt($(this).val());
    var radians=degrees*Math.PI/180;
    drawNeedle(cw/2,ch/2,150,radians);
});

drawNeedle(cw/2,ch/2,150,radians);

function drawNeedle(cx,cy,radius,radianAngle){
    ctx.clearRect(0,0,cw,ch);
    ctx.translate(cx,cy);
    ctx.rotate(radianAngle);
    ctx.beginPath();
    ctx.moveTo(0,-5);
    ctx.lineTo(radius,0);
    ctx.lineTo(0,5);
    ctx.fillStyle='blue';
    ctx.fill();
    ctx.rotate(-radianAngle);
    ctx.translate(-cx,-cy);
    ctx.beginPath();
    ctx.arc(cx,cy,10,0,Math.PI*2);
    ctx.fill();
}

body{ background-color:white; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Needle angle&nbsp <input id=myslider type=range><br>
<canvas id="canvas" width=512 height=512></canvas>