HTML5-画布元素(页面对齐)

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

我尝试过使用：

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

将画布向右移动&向下，但似乎唯一能移动Canvas的是它周围的其他HTML元素

有人知道如何调整画布对齐属性吗？非常感谢您的帮助！：）这个应用程序是免费使用的！

<!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>

最简单的方法如下：

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

相关内容

最新更新

热门标签：