HTML5 - Canvas 元素（页面对齐）

Question

有没有办法调整 HTML5 文档中 Canvas 元素的对齐方式？

我试过使用：

<canvas id="canvas" width="600" height="400" style="background-color:white;  
left:200; top:50;"> </canvas>

将 Canvas 向右和向下移动，但似乎唯一移动 Canvas 的是它周围的其他 HTML 元素。

有没有人知道如何调整 Canvas 对齐属性？非常感谢你的帮助！ :) 此应用程序可免费使用！

<!DOCTYPE html>
<html>

    <head>
    <title> Pixel Painter </title>
    </head>

<body id="body" style="background-color:gray;">
<p style="background-color:gray; color:white; font-family:tahoma; font-    
 size:30px;"> Pixel Painter </p>

<canvas id="canvas" width="600" height="400" style="background- 
 color:white;"> </canvas>
<br>

<button type="button" id="BLUE" onclick="colorBlue()" style="background- 
color:blue; color:white; font-family:tahoma; font-size:25px;"> BLUE   
</button>

<button type="button" id="RED" onclick="colorRed()" style="background-
color:red; color:white; font-family:tahoma; font-size:25px;"> RED </button>

<button type="button" id="YELLOW" onclick="colorYellow()" style="background-
 color:yellow; font-family:tahoma; font-size:25px;"> YELLOW </button>

<button type="button" id="GREEN" onclick="colorGreen()" style="background- 
color:green; color:white; font-family:tahoma; font-size:25px;"> GREEN  
</button>

<button type="button" id="ORANGE" onclick="colorOrange()" style="background-
color:orange; font-family:tahoma; font-size:25px;"> ORANGE </button>

<button type="button" id="PURPLE" onclick="colorPurple()" style="background-
color:purple; color:white; font-family:tahoma; font-size:25px;"> PURPLE 
</button>


<script>
var canvas, context;                                

function CanvasProperties(){
    canvas = document.getElementById("canvas");        
    context = canvas.getContext("2d");        
    window.addEventListener("mousemove", CustomCursor, false);
}

function CustomCursor(e){
    var canvasRect = canvas.getBoundingClientRect(); 
    var xPosition = e.clientX - 5 - canvasRect.left;
    var yPosition = e.clientY - 5 - canvasRect.top;
    context.fillRect(xPosition, yPosition, 10, 10);
}

function colorBlue() {
context.fillStyle = "blue";
}

function colorRed(){
context.fillStyle = "red";
}

function colorYellow(){
context.fillStyle = "yellow";
}

function colorGreen(){
context.fillStyle = "green";
}

function colorOrange(){
context.fillStyle = "orange";
}

function colorPurple(){
context.fillStyle = "purple";
}

window.addEventListener("load", CanvasProperties, false);
</script>

</body>
</html>

Answer 1

最简单的方法是这样的：

<canvas id="canvas" width="600" height="400" style="background-color:white; display: block; margin: 0 auto;"> </canvas>

HTML5 - Canvas 元素（页面对齐）

HTML5 - Canvas element (page alignment)

html

styles

canvas

alignment