定位HTML5畫布元素

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');