[英]How do I rotate this shape?
I am just starting out with canvas. 我刚开始用帆布。 I made this: 我做的:
http://www.kingoslo.com/instruments/ http://www.kingoslo.com/instruments/
The arrow for the tachometer is a drawn using canvas. 转速计的箭头是使用画布绘制的。 Now I am trying to make an animation to rotate it around the enter of the tachometer (not itself). 现在我试图制作一个动画,围绕转速计的输入(而不是自身)旋转它。 This is what I have written so far: 这是我到目前为止所写的:
<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>
I have no idea how to get further. 我不知道如何进一步发展。 Also, is there comprehensive documentation anywhere that covers these things? 此外,是否有涵盖这些内容的任何地方的综合文档?
Thanks. 谢谢。
Kind regards, 亲切的问候,
Marius 马吕斯
Have you seen this https://github.com/vjt/canvas-speedometer 你见过这个https://github.com/vjt/canvas-speedometer吗?
I have written your code: 我写了你的代码:
Make sure that the center point
of the meter must be at the center of your image
else it will not work. 确保center point
的米必须是在the center of your image
否则将无法正常工作。
You can handle value of i
to rotate your pin in meter. 你可以处理i
值来旋转你的引脚。
Here, I have taken two images 在这里,我拍了两张照片
CODE: 码:
<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>
Update: If you want to handle meter with value of rpm Replace 更新:如果要处理值为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
with 同
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
output: 输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.