我想制作一个指南针,其中中箭头将显示北西南方向,另一个动态箭头显示风向。 我成功制作了中箭,但不知道如何制作动态风箭。我是新编码,请帮助我,我已经尝试了很多天。 这是javscript:
var img = null,
needle1 = null,
needle2 = null;
ctx = null,
degrees = 0;
function clearCanvas() {
// clear canvas
ctx.clearRect(0, 0, 200, 200);
}
$(document).ready(function(){
$("#submit").click(function(){
var deg = $('#deg').val();
draw(deg);
imgLoaded(deg);
});
$("#deg").click(function(){
var deg = $('#deg').val();
draw(deg);
imgLoaded(deg);
});
$("#deg").keydown(function(){
var deg = $('#deg').val();
draw(deg);
imgLoaded(deg);
});
});
function draw(deg) {
clearCanvas();
// Draw the compass onto the canvas
ctx.drawImage(img, 0, 0);
// Save the current drawing state
ctx.save();
// Now move needle across and down half the
ctx.translate(100, 100);
// Rotate around this point
ctx.rotate(degrees * (Math.PI / 180));
// Draw the image back and up
ctx.drawImage(needle1, -100, -100);
// Now move needle across and down half the
ctx.translate(70, 60);
// Rotate around this point
ctx.rotate(degrees * (Math.PI / 180));
// Draw the image back and up
ctx.drawImage(needle2, -100, -100);
// Restore the previous drawing state
ctx.restore();
// Increment the angle of the needle from user given degrees
degrees = deg;
}
function imgLoaded(deg) {
// Image loaded event complete. Start the timer
setInterval(draw(''));
}
function init() {
// Grab the compass element
var canvas = document.getElementById('compass');
// Canvas supported?
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
// Load the needle image
needle2 = new Image();
needle2.src = 'needle2.png';
// Load the needle image
needle1 = new Image();
needle1.src = 'needle1.png';
// Load the compass image
img = new Image();
img.src = 'compass.jpg';
img.onload = imgLoaded;
} else {
alert("Canvas not supported!");
}
}