画布 - 如何中心ontop

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个问题，我一直在奋斗的最后一个小时。基本上这个代码显示了一个时钟和一个鹿的图像。 我想要时钟和鹿居中和鹿的顶部时钟如在此图像：画布 - 如何中心ontop

但无论我做什么，我不能得到它的工作。任何人都有这个解决方案？

<!DOCTYPE html> 
<html> 
<body> 
<body bgcolor="#000000"> 
<style type="text/css"> 
.bgimg { 
    background-image: url(klockren.png); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    height:800px; 
} 
#canvas { 
     margin-left:85px; 
    margin-top:420px; 
} 
</style> 
<div align="center" class="bgimg"> 
    <div class="canvas"> 
     <canvas id="canvas" width="100" height="100"></canvas> 
    </div> 
</div> 
<script> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height/2; 
ctx.translate(radius, radius); 
radius = radius * 0.90 
setInterval(drawClock, 1000); 
function drawClock() { 
    drawFace(ctx, radius); 
    drawNumbers(ctx, radius); 
    drawTime(ctx, radius); 
} 
function drawFace(ctx, radius) { 
    var grad; 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, 2*Math.PI); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 
    grad.addColorStop(0, '#333'); 
    grad.addColorStop(0.5, 'black'); 
    grad.addColorStop(1, '#333'); 
    ctx.strokeStyle = grad; 
    ctx.lineWidth = radius*0.1; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
    ctx.fillStyle = '#000'; 
    ctx.fill(); 
} 
function drawNumbers(ctx, radius) { 
    var ang; 
    var num; 
    ctx.font = radius*0.15 + "px arial"; 
    ctx.textBaseline="middle"; 
    ctx.textAlign="center"; 
    for(num = 1; num < 13; num++){ 
    ang = num * Math.PI/6; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.85); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.85); 
    ctx.rotate(-ang); 
    } 
} 
function drawTime(ctx, radius){ 
    var now = new Date(); 
    var hour = now.getHours(); 
    var minute = now.getMinutes(); 
    var second = now.getSeconds(); 
    //hour 
    hour=hour%12; 
    hour=(hour*Math.PI/6)+ 
    (minute*Math.PI/(6*60))+ 
    (second*Math.PI/(360*60)); 
    drawHand(ctx, hour, radius*0.5, radius*0.07); 
    //minute 
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
    drawHand(ctx, minute, radius*0.8, radius*0.07); 
    // second 
    second=(second*Math.PI/30); 
    drawHand(ctx, second, radius*0.9, radius*0.02); 
} 
function drawHand(ctx, pos, length, width) { 
    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.lineCap = "round"; 
    ctx.moveTo(0,0); 
    ctx.rotate(pos); 
    ctx.lineTo(0, -length); 
    ctx.stroke(); 
    ctx.rotate(-pos); 
} 
</script> 
</body> 
</html>

回答：

我添加了一个CSS的这个希望这有助于

<div align="center" class="bgimg"> 
<div align="center"> 
<canvas id="canvas" width="100" height="100" 
style="background-color:#fff"> 
</canvas> 
</div> 
</div> 
    var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height/2; 
ctx.translate(radius, radius); 
radius = radius * 0.90 
setInterval(drawClock, 1000); 
function drawClock() { 
    drawFace(ctx, radius); 
    drawNumbers(ctx, radius); 
    drawTime(ctx, radius); 
} 
function drawFace(ctx, radius) { 
    var grad; 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, 2*Math.PI); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 
    grad.addColorStop(0, '#333'); 
    grad.addColorStop(0.5, 'white'); 
    grad.addColorStop(1, '#333'); 
    ctx.strokeStyle = grad; 
    ctx.lineWidth = radius*0.1; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
    ctx.fillStyle = '#000'; 
    ctx.fill(); 
} 
function drawNumbers(ctx, radius) { 
    var ang; 
    var num; 
    ctx.font = radius*0.15 + "px arial"; 
    ctx.textBaseline="middle"; 
    ctx.textAlign="center"; 
    for(num = 1; num < 13; num++){ 
    ang = num * Math.PI/6; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.85); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.85); 
    ctx.rotate(-ang); 
    } 
} 
function drawTime(ctx, radius){ 
    var now = new Date(); 
    var hour = now.getHours(); 
    var minute = now.getMinutes(); 
    var second = now.getSeconds(); 
    //hour 
    hour=hour%12; 
    hour=(hour*Math.PI/6)+ 
    (minute*Math.PI/(6*60))+ 
    (second*Math.PI/(360*60)); 
    drawHand(ctx, hour, radius*0.5, radius*0.07); 
    //minute 
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
    drawHand(ctx, minute, radius*0.8, radius*0.07); 
    // second 
    second=(second*Math.PI/30); 
    drawHand(ctx, second, radius*0.9, radius*0.02); 
} 
function drawHand(ctx, pos, length, width) { 
    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.lineCap = "round"; 
    ctx.moveTo(0,0); 
    ctx.rotate(pos); 
    ctx.lineTo(0, -length); 
    ctx.stroke(); 
    ctx.rotate(-pos); 
} 
.bgimg { 
    background-image: url(/wp-content/uploads/new2022/20220327voicc/170153632.png); 
    background-repeat: no-repeat; 
    height:570px; 
} 
#canvas { 
     margin-left:370px; 
    margin-top:240px; 
}

https://jsfiddle.net/4heaex79/

回答：

您可以使用下面的代码来对齐帆布正确：

#canvas{ 
    position: relative; 
    top: 40%; 
}

回答：

#clock { 
    position: absolute; 
    top: 270px; 
    right: 340px; 
}

相反我的背景法师，使用图像标签，然后绝对定位时钟。

查看下面的jsfiddle。

https://jsfiddle.net/m3s7tvtc/

回答：

您鹿图像的高度为800个* 591像素。

将.bgimg设置为相对位置。将类（.canvas）添加到围绕画布本身的div，并将其位置设置为绝对。现在设置顶部和左侧位置，直到它适合您想要的中间位置。

查找下面的示例。你可能想编辑它以适应你的风格。

<!DOCTYPE html> 
<html> 
<body> 
<style type="text/css"> 
.bgimg { 
    background-image: url(/wp-content/uploads/new2022/20220327voicc/170153632.png); 
    background-repeat: no-repeat; 
    position:relative; 
} 
.canvas {position:absolute; top:250px; left:380px;} 
</style> 
<div align="center" class="bgimg"> 
    <div class="canvas"> 
     <canvas id="canvas" width="100" height="100"></canvas> 
    </div> 
</div> 
<script> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height/2; 
ctx.translate(radius, radius); 
radius = radius * 0.90 
setInterval(drawClock, 1000); 
function drawClock() { 
    drawFace(ctx, radius); 
    drawNumbers(ctx, radius); 
    drawTime(ctx, radius); 
} 
function drawFace(ctx, radius) { 
    var grad; 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, 2*Math.PI); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 
    grad.addColorStop(0, '#333'); 
    grad.addColorStop(0.5, 'white'); 
    grad.addColorStop(1, '#333'); 
    ctx.strokeStyle = grad; 
    ctx.lineWidth = radius*0.1; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
    ctx.fillStyle = '#000'; 
    ctx.fill(); 
} 
function drawNumbers(ctx, radius) { 
    var ang; 
    var num; 
    ctx.font = radius*0.15 + "px arial"; 
    ctx.textBaseline="middle"; 
    ctx.textAlign="center"; 
    for(num = 1; num < 13; num++){ 
    ang = num * Math.PI/6; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.85); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.85); 
    ctx.rotate(-ang); 
    } 
} 
function drawTime(ctx, radius){ 
    var now = new Date(); 
    var hour = now.getHours(); 
    var minute = now.getMinutes(); 
    var second = now.getSeconds(); 
    //hour 
    hour=hour%12; 
    hour=(hour*Math.PI/6)+ 
    (minute*Math.PI/(6*60))+ 
    (second*Math.PI/(360*60)); 
    drawHand(ctx, hour, radius*0.5, radius*0.07); 
    //minute 
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
    drawHand(ctx, minute, radius*0.8, radius*0.07); 
    // second 
    second=(second*Math.PI/30); 
    drawHand(ctx, second, radius*0.9, radius*0.02); 
} 
function drawHand(ctx, pos, length, width) { 
    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.lineCap = "round"; 
    ctx.moveTo(0,0); 
    ctx.rotate(pos); 
    ctx.lineTo(0, -length); 
    ctx.stroke(); 
    ctx.rotate(-pos); 
} 
</script> 
</body> 
</html>

以上是 画布 - 如何中心ontop 的全部内容， 来源链接： utcz.com/qa/258757.html

回到顶部