HTML5-画布元素（页面对齐）_Html_Canvas_Styles_Alignment

HTML5-画布元素（页面对齐）

html canvas

HTML5-画布元素（页面对齐）,html,canvas,styles,alignment,Html,Canvas,Styles,Alignment,有没有办法调整HTML5文档中画布元素的对齐方式我试过使用： <canvas id="canvas" width="600" height="400" style="background-color:white; left:200; top:50;"> </canvas> 将画布向右和向下移动，但似乎唯一能移动画布的是围绕画布的其他HTML元素有人知道如何调整画布对齐属性吗？非常感谢你的帮助！：）这个应用是免费使用的 <!DOCTYPE html>

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

我试过使用：

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


像素画师
像素画师


蓝色
红色
黄的
绿色
橙色
紫色
var，上下文；
函数CanvasProperties（）{
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
addEventListener（“mousemove”，CustomCursor，false）；
}
函数CustomCursor（e）{
var canvasRect=canvas.getBoundingClientRect（）；
var xPosition=e.clientX-5-canvasRect.left；
var ypposition=e.clientY-5-canvasRect.top；
fillRect（xPosition，yPosition，10,10）；
}
函数colorBlue（）{
context.fillStyle=“蓝色”；
}
函数colorRed（）{
context.fillStyle=“红色”；
}
函数colorYellow（）{
context.fillStyle=“黄色”；
}
函数colorGreen（）{
context.fillStyle=“绿色”；
}
函数colorOrange（）{
context.fillStyle=“橙色”；
}
函数colorPurple（）{
context.fillStyle=“紫色”；
}
window.addEventListener（“加载”，CanvasProperties，false）；

最简单的方法如下：

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

Awesome！：）谢谢，乔·R