Question

需要有关HTML 5的建议。这个主题相对来说很新。

我希望在屏幕的上半部分绘制一个图像，其中有两个对象，徽标和在固定位置放置在此图像上的名称。我试图将这三个对象放在同一个div中的三个不同的画布上，但没有运气，然后将这三个对象放在三个不同的<div>值中，但又没有运气。

出于解释的目的，我放弃了主背景图像，并尝试将两幅画布紧挨着另一幅画布，但不幸的是，没有成功。该代码如下：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="mls.css"></link>
<title>HTML5 more difficult than 64 bit assembly</title>
<img id="logo_image"></img>
</head>

<body>
<div>
<div id="header_logo"><canvas id="header_logo_canvas"></canvas></div>
<div id="header_name"><canvas id="header_name_canvas"></canvas></div>
<div style="clear:both";></div>
</div>
<script type="text/javascript">
  var logo_canvas = document.getElementById("header_logo_canvas");
  var logo_context = logo_canvas.getContext("2d");
  var logo_img = document.getElementById("logo_image");
  logo_img.src="logo v2.jpg";
  logo_context.drawImage(logo_img,logo_canvas.width/2,logo_canvas.height/2);

  var h_name_canvas = document.getElementById("header_name_canvas");
  var h_name_context = h_name_canvas.getContext("2d");
  h_name_context.font="20px Arial";
  h_name_context.fillStyle="#0000FF";
  h_name_context.textAlign="left";
  h_name_context.fillText("HTML5",0,h_name_canvas.height/2);
</script>
</body>
</html>

和相应的CSS表格如下：

#logo_image {
    height:128px;
    width:128px;
}
#header_logo_canvas {
    border:3px;
    border-color:black;
    background:transparent;
    height:200px;
    width:200px;
    z-index:1;
}
#header_name_canvas {
    border:1px;
    border-color:blue;
    background:transparent;
    height:200px;
    width:600px;
    z-index:0;
}
#header_logo {
    position:absolute;
    left:100px;
    top:100px;  
    float:left;
    width:200px;
    background:transparent;
}
#header_name {
    position:absolute;
    left:300px;
    top:100px;      
    width:600px;
    background:transparent;
}

请求帮助，提供适合新主题的详细解释。另外，请告知我如何将这三幅主要底衬图片介绍给这两幅画布？

由于

Answer 1

使用position:relative创建一个div容器，并将您的3幅画布放在position:absolute内，并使用left根据需要移动画布。

＆＃13;

var canvasB=document.getElementById("canvasBottom");
var ctxB=canvasB.getContext("2d");
var canvasL=document.getElementById("canvasLeft");
var ctxL=canvasL.getContext("2d");
var canvasR=document.getElementById("canvasRight");
var ctxR=canvasR.getContext("2d");

drawLine(ctxB,'red');
drawLine(ctxL,'green');
drawLine(ctxR,'blue');

function drawLine(ctx,color){
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(ctx.canvas.width,ctx.canvas.height);
    ctx.strokeStyle=color;
    ctx.stroke();
}

＆＃13;

#container{position:relative;border:1px solid gold;width:800px;height:400px;}
.part{position:absolute;}
#canvasBottom{left:0;border:2px solid red;}
#canvasLeft{left:0;border:1px solid green;}
#canvasRight{left:300px;border:1px solid blue;};

＆＃13;

<h4>Red==bottom canvas, Green==Left canvas, Blue==Right canvas</h4>
<canvas id="canvasBottom" class='part' width=700 height=350></canvas>
<canvas id="canvasLeft" class='part' width=300 height=300></canvas>
<canvas id="canvasRight" class='part' width=300 height=300></canvas>

＆＃13;

如何将两个画布彼此相邻并放在第三个画布之上

1 个答案: