[英]How do I rotate this shape?
我剛開始用帆布。 我做的:
http://www.kingoslo.com/instruments/
轉速計的箭頭是使用畫布繪制的。 現在我試圖制作一個動畫,圍繞轉速計的輸入(而不是自身)旋轉它。 這是我到目前為止所寫的:
<script type="text/javascript">
var img = new Image();
function init(){
img.src = 'background.png';
setTimeout(draw,4000);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(247,308);
ctx.bezierCurveTo(51, 408, 51, 410, 51, 411);
ctx.bezierCurveTo(53, 413, 52, 412, 249, 313);
ctx.fillStyle = "red";
ctx.fill();
}
}
</script>
我不知道如何進一步發展。 此外,是否有涵蓋這些內容的任何地方的綜合文檔?
謝謝。
親切的問候,
馬呂斯
你見過這個https://github.com/vjt/canvas-speedometer嗎?
我寫了你的代碼:
確保center point
的米必須是在the center of your image
否則將無法正常工作。
你可以處理i
值來旋轉你的引腳。
在這里,我拍了兩張照片
碼:
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var meter = new Image();
meter.src = 'Mt.png'; //meter background image
var pin = new Image();
pin.src = 'pin3.png'; //meter pin image
var x=meter.width/2; // center point.X (must be the center of image)
var y=meter.height/2; // center point.Y
var width = meter.width;
var height = meter.height;
var i=120; // angle of rotation in degrees
var min =-115; // maximum angle = 6 RPM in meter
var max =100; // minimum angle = 0 RPM in meter
i=(i < min)? min:(i > max)? max:i; //to check i must be within min & max range
var angleInRadians = Math.PI * i/180; //converting degree to radians
meter.onload = function()
{
context.translate(x,y); //setting center at x,y
context.drawImage(meter, -width / 2, -height / 2, width, height); //drawing meter background
context.rotate(angleInRadians); //rotating by angle
context.drawImage(pin, 0-pin.width/2,0-pin.height+pin.width/2,pin.width,pin.height); //adjusting pin center at meter center
}
}
</script>
更新:如果要處理值為rpm的儀表替換
var i=120; // angle of rotation in degrees
var min =-115; // maximum angle = 6 RPM in meter
var max =100; // minimum angle = 0 RPM in meter
同
var r=1.7; //handle here
var min =-114;
var max =99;
var span = (max-min)/6; // dividing rotation angle by meter scale
var i=r*span+min; //angle of rotation from value of r and span
輸出:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.