Question

我是HTML5的新手，过去几天一直在阅读它，主要是因为我想创建一个旋转图像放入<div>。我发现了一个完全符合我想要的代码，但它将画布抛到我页面的左下角（我不知道为什么，但我认为这与下面代码的第一行有关））。我不知道如何使代码适应元素，以便我可以把它放在我想要的地方。从查看其他人的脚本并尝试模拟它们，我知道你应该做这样的事情来保持画布“<canvas width="100" height="100" id="pageCanvas"></canvas>”，但我不知道如何按顺序命名下面的代码要做到这一点。我非常感谢任何人都能给我的帮助 - 非常感谢你阅读！：）

<script>

    window.addEventListener("load", init); 

    var counter = 0,
        logoImage = new Image(),
        TO_RADIANS = Math.PI/180; 
    logoImage.src = 'IMG URL';
    var canvas = document.createElement('canvas'); 
    canvas.width = 100; 
    canvas.height = 100; 
    var context = canvas.getContext('2d'); 
    document.body.appendChild(canvas); 

    function init(){
        setInterval(loop, 1000/30); 

    }

    function loop() { 
        context.clearRect(0,0,canvas.width, canvas.height); 
        drawRotatedImage(logoImage,100,100,counter); 
        drawRotatedImage(logoImage,300,100,counter+90); 
        drawRotatedImage(logoImage,500,100,counter+180); 
        counter+=2; 

    }


    function drawRotatedImage(image, x, y, angle) { 

        // save the current co-ordinate system 
        // before we screw with it
        context.save(); 

        // move to the middle of where we want to draw our image
        context.translate(x, y);

        // rotate around that point, converting our 
        // angle from degrees to radians 
        context.rotate(angle * TO_RADIANS);

        // draw it up and to the left by half the width
        // and height of the image 
        context.drawImage(image, -(image.width/2), -(image.height/2));

        // and restore the co-ords to how they were when we began
        context.restore(); 
    }
    </script>

Answer 1

在HTML代码中创建一个canvas元素，以便您可以将其放置在您想要的位置（使用html + css）：

<canvas id='canvas' height='100' width='100'> Your browser does not support HTML5 canvas </canvas>

并替换此javascript代码：

var canvas = document.createElement('canvas'); 
canvas.width = 100; 
canvas.height = 100; 
var context = canvas.getContext('2d'); 
document.body.appendChild(canvas);

这一个：

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d');

定位HTML5 Canvas元素

1 个答案: