相关疑难解决方法(0)

使用CSS时画布被拉伸,但是"宽度"/"高度"属性正常

我有2个画布,一个使用HTML属性width并height调整大小,另一个使用CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Run Code Online (Sandbox Code Playgroud)

Compteur1显示它应该,但不是compteur2.内容使用300x300画布上的JavaScript绘制.

为什么会有显示差异？

替代文字

css height html5 canvas width

Sir*_*ber

2017 06-27

181
推荐指数

5
解决办法

7万
查看次数

如何在html中设置图像顶部的画布

假设我有一个带有画布的index.html:

<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">

<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

并且画布以这种方式显示好~~~

现在我想在画布后面放置一个图像作为背景,我试图在主体中添加一个img标签:

<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

但随后画布似乎显示在图像不在它之上...

我真的对html一无所知我觉得应该不难做到这一点,希望有人能在这里伸出手,谢谢:)

html html5 canvas

sup*_*oon

lucky-day

15
推荐指数

1
解决办法

3万
查看次数