画布罗盘编码错误

时间:2017-01-31 09:16:24

标签: javascript

我想制作一个指南针,其中中箭头将显示北西南方向,另一个动态箭头显示风向。 我成功制作了中箭,但不知道如何制作动态风箭。我是新编码,请帮助我,我已经尝试了很多天。 这是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!");
    }
    }

0 个答案:

没有答案