为什么当我放入canvas标签时，我的section元素没有显示出来？
当你将canvas标签放入section元素中时，可能会出现section元素不显示的情况。这是因为canvas标签默认具有绝对定位（position: absolute）的特性，而绝对定位的元素会脱离文档流，不会影响其他元素的布局。
解决这个问题的方法有两种：
- 显式设置section元素的高度和宽度：可以通过CSS样式为section元素设置一个具体的高度和宽度，确保其能够容纳canvas标签。例如：
section {
width: 100%;
height: 400px; /* 设置一个适当的高度 */
}- 使用CSS布局技术：可以使用CSS布局技术，如Flexbox或Grid布局，来确保section元素能够自动适应其内容的大小。例如：
section {
display: flex;
align-items: center;
justify-content: center;
}以上两种方法都可以使得section元素能够正确显示，具体选择哪种方法取决于你的布局需求和设计。
关于canvas标签和section元素的更多信息，你可以参考以下链接：
请注意，以上提供的链接是Mozilla开发者网络（MDN）的官方文档，提供了详细的HTML元素和属性的解释和示例。
相关·内容
我正在创建一个joomla模板，并尝试使用自定义Html模块。当我在模块中添加代码时..。它显示正确的元素，除非没有画布。
这是我试图放入模块的代码。
<div class="pane1">
<h1>Static Designs</h1>
<div class="artBox" id="aBox">
<section class="slide">
浏览 3提问于2013-12-10得票数 0
回答已采纳
在Jquery中查找下一个元素id时，最简单的解决方案是使用最近(元素)。但它并不适用于画布，我也不知道为什么。
$('a.findNext').click(function() {
debugger;
var nextSectionWithId = $(this).closest("canvas").nextAll("canvas[id]:first");
if (nextSectionWithId) {
var sectionId = nextSectionWithId.attr('id');
浏览 2提问于2022-02-01得票数 0
回答已采纳
我正在使用GObject类创建一个简单的face，它将使用GRect和GOval。我希望将GRect和GOval锚定到我将getWidth()和getHeight()描述为实例变量的相同坐标。当我这样做时，我没有显示任何错误，但是在画布上没有结果。只有当我将getWidth()和getHeight()描述为局部变量时，我才会得到结果。为什么实例变量的效果没有显示出来？
/*
* This is section 2 problem 2 to draw a face using GRect amnd GOval. The face is centred in the canvas.
*
浏览 1提问于2013-03-28得票数 0
22回答
我使用Chartjs显示线条图，这很好：
// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');
// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);
但是，当我试图更改图表的数据时，问题就会发生。我通过使用新的数据点创建图表的新实例来更新图表，从而重新初始化画布。
这个很好用。但是，当我在新图表上悬停时，如果我碰巧浏览了与旧图
浏览 19提问于2014-07-18得票数 137
回答已采纳
1回答
我有一个没有width和height属性的canvas标签。画布具有内联宽度和高度。现在，当我在它上面应用linearGradient时，它不会覆盖整个画布。演示：
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var gradient1 = ctx.createLinearGradient(0, 0, 150, 0);
gradient1.addColorStop(0, "#123456");
gradient1.addColorSt
浏览 0提问于2017-05-19得票数 0
1回答
我有一个画布对象，具有通过JavaScript函数定义的top和left属性，但当我创建fabric画布对象时
var fabricCanvas= new fabric.Canvas('mycanvas');
我的画布没有显示出来，我应该尝试这样做
在flow上读取堆栈时，会说边距:0自动解决问题，但它没有解决问题
.canvas-container {
margin:0 auto ;
position:absolute;
top: 110;
left: 310;
浏览 1提问于2014-03-13得票数 0
我想创建一个表单，其中标签仅在输入元素悬停时显示。
我一直在遵循HTML5和CSS3上的正确代码来做到这一点，但它仍然不能工作，我想知道为什么？
你能告诉我我的错误在哪里吗？
在HTML5上：
<section class="container">
<form>
<div class="row">
<div class="col1">
<label>What is your full name ?</l
浏览 0提问于2019-06-08得票数 0
你能推荐一个HTML5吗？
<figure>
<img src="path/to/image" alt="About image">
<figcaption>
<p>This is an image of something interesting.</p>
</figcaption>
</figure>
和
<section>
<!-- Content here -->
</section>
j
浏览 3提问于2011-08-05得票数 0
回答已采纳
1回答
我有一个更新面板外的标签和一个更新面板内的按钮。在按钮单击事件中，我更新了标签文本。当我运行代码并单击按钮，然后发生部分回发，按钮单击事件触发，但标签值没有更改。如果我也将标签放在更新面板中，那么在单击按钮时，标签值会发生变化。我不明白为什么标签值没有更新。假设如果我希望标签不在更新面板中，并且标签值应该在部分回发时更改，那么如何编写代码。我不想把标签放在任何更新面板中。请指导我与小样本工作代码。
谢谢
浏览 0提问于2010-12-05得票数 0
回答已采纳
最近我去了w3schools ，发现了“部分”和“文章”标签。我的问题是什么时候应该使用章节、文章或div标签，为什么当我使用章节和文章标签时，文本会变得更小？如下所示：
<section><h1>H1 tag in a section tag</h1></section>
<article><h1>H1 tag in an article tag</h1></article>
<h1>H1 tag in nothing</h1>
复制并粘贴到中。(只是为了方便起见放在那里)
浏览 0提问于2011-11-28得票数 16
回答已采纳
1回答
这是我的代码
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 61.0
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerCell = tableView.dequeueReusableCellWithIdentifier("CustomHeaderCell&
浏览 0提问于2016-08-17得票数 2
回答已采纳
目前我正在读一本新的HTML5书(HTML5.Webseiten innovativ und zukunftssicher by Peter Kröner)。这里有一些如何教IE6-8理解HTML5的例子。一种策略如下所示(如果启用了Javascript )：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 in IE</title>
<script>
浏览 0提问于2011-10-14得票数 0
回答已采纳
我有以下情况，其中必须完成100%在纯CSS，没有JS包括。
JSFiddle：
现在，当我加载页面时，会显示默认内容。同样，当我点击第一个标签时，右边的内容也会显示出来。我感兴趣的是，当我单击其他选项卡时，默认内容会消失，而相关内容会出现。
这只能在CSS中完成，所以不需要涉及Javascript。这可以做到吗？
.accordion {
width:830px;
overflow:hidden;
margin:10px auto;
color:#474747;
padding:10px;
浏览 2提问于2014-12-03得票数 0
2回答
有没有一种有效的方法可以用jSoup获取所有打开但不是关闭的标签的HTML元素标签路径？
例如，如果HTML是
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<section id="secID">
<div class="divClass">
<section id="subSection">
浏览 0提问于2013-03-24得票数 0
回答已采纳
每当我放入一个<canvas id=c></canvas>，我的<section id="greeter"></section>就不会出现在页面上。我已经使用了z-index，并将画布移到了身体之外，这并没有什么不同。而且，我的画布没有覆盖整个页面。当我向下滚动时，画布与主体一起移动，但只覆盖了屏幕开始时的窗口。当您向下滚动时，会出现一个空白背景。 html&css
浏览 90提问于2020-10-01得票数 0
在我的索引页面上，我有许多包含。
<section><?php include('content/content1.php') ?></section>
<section><?php include('content/content2.php') ?></section>
<section><?php include('content/content3.php') ?></section>
在每个脚本中，我都有一个独特的脚本(以及这里没有显
浏览 0提问于2020-11-09得票数 0
我正在尝试制作一个(沉重的)swf文件幻灯片。因为我已经用javascript.And在html页面的底部创建了导航标签，我的‘目的’是当我点击任何导航标签时，特定的swf文件将被加载。在这里我得到的问题是，当我打开那个html文件时，所有swf文件都同时加载。所以当我点击nxt标签时，swf的一部分只显示出来。
那么这个问题的解决方案是什么呢？
有没有办法，当我点击导航标签时，只有特定的swf文件将播放的时间，当我要去nxt标签时，以前的标签应该卸载。
浏览 0提问于2011-03-04得票数 0
回答已采纳
当我添加一个与body标签具有相同大小(width + height)的元素时，我总是得到(不必要的？！)水平和垂直滚动条(在Chrome和FF中测试)。
/* css */
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
/* javascript */
$("<canvas>")
.appendTo("body")
.attr("width", $("body").width())
.attr("height",
浏览 2提问于2013-04-22得票数 1
当我创建一个标签时，我在设计器中将它的显示设置为无。
<asp:Label ID="label1" runat="server" style="display:none;" Text="LABEL" asp:Label>
我使用javascript通过以下方式使标签可见：
var lbl = document.getElementById('label1');
lbl.style.display="";
我这样做了，在标签应该在表单上的位置创建了空格，但是标签本身并没有显示出来。，WHe
浏览 1提问于2011-01-05得票数 2
回答已采纳
场景
我有一个CSS选择器，它应该在单击标签时显示子内容。选择器沿着input:checked + element + element的行给最后一个元素一个块的显示(缺省值为none)。问题是，除了webkit之外，它可以在所有主流浏览器中运行。Chrome、Safari和android (v2.2版，抱歉，我落后于时代)的移动浏览器都无法显示该元素。当我检查Chrome中的元素时，它显示它应该是display: block，但它没有呈现它。我可以在开发人员工具中取消选中和选中该属性，它会显示出来，但不是在此之前。
我假设这是webkit中的一个bug。
问题
这是一个多部分的问题:这是web
浏览 0提问于2013-01-08得票数 13
回答已采纳
1回答
当我把它设置为画布时，这段代码工作得很好。但是，当我想在svg元素上使用它时，我什么也得不到。我要做的是获取相对于画布的鼠标坐标，然后根据用户单击的位置绘制svg形状。
它适用于这个html：
<section class=chartArea>
<canvas id=svg></canvas>
</section>
此html不起作用：
<section class=chartArea>
<svg id=svg></svg>
</section>
javascript：
svg = d
浏览 3提问于2015-02-10得票数 0
回答已采纳
2回答
W3C在他们的中说
<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
浏览 1提问于2017-10-06得票数 1
回答已采纳
我有以下代码片段
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
除非我添加以下CSS样式，否则该代码不会在屏幕上显示地图
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
pad
浏览 0提问于2013-02-17得票数 0
回答已采纳
import React, { Component } from 'react';
import Phaser from 'phaser';
export default class App extends Component {
constructor(props) {
super(props);
this.game = null;
this.create = () => {
this.game.stage.backgroundColor = '#124184';
}
}
co
浏览 0提问于2018-07-21得票数 7
5回答
下面是演示
容器是id(div)，这意味着它从浏览器继承了一个display:block值，容器中的两个div是类。它们都有200px和300px，而主容器具有600px宽度，所以我认为当我将其中一个类向右浮动时，它应该只消耗整个容器中的300px，这意味着两个div应该适合容器内，而不是一个出现在另一个容器上。没有clear:both属性。
如果容器是id，有600 it，那么嵌套在其中的类(特别是当一个类向右浮动时，它们应该填充容器)。
简单地说，，，为什么绿色div类可以很好地适应容器，而却向右浮动呢？，我不明白这个问题。
代码: css
#content_canvas_containe
浏览 0提问于2013-11-28得票数 3
回答已采纳
考虑主体标记中的以下代码：
<div id='div1'></div>
<canvas id='c1' width='1000px', height='400px'></canvas>
现在，在脚本标签下
var canvas = new fabric.Canvas('c1');
canvas.on('mouse:down', getMouse);
function getMouse(ev)
{
var pointer = canvas.getPoi
浏览 2提问于2014-03-02得票数 2
回答已采纳
1回答
我在一个li标记中有三个ul标记，每个标签中都包含一个图像。我有一个canvas标签。我正试图将ul放入canvas中，但随后，什么也没有出现。这是我的密码。
<canvas>
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="13.jpg" /></li>
</ul>
浏览 0提问于2014-01-17得票数 0
所以，我在我的UITableView中有几个滑动操作，比如删除，阻止等等。我想要添加标题来分隔我的两个部分。因此，我添加了一个原型单元，将其命名为HeaderCell，然后转到视图。我添加了一个名为headerLabe的标签。我的问题是，当我滑动操作时，标题单元格也在移动，这看起来很糟糕。我研究了一下，找到了一个只返回单元格的contentView的解决方案。但是，当我这样做的时候，标签并没有显示出来。我已经尝试了十几种不同的解决方案，但都没有奏效，所以我转向了这样做。有谁可以帮我？
override func tableView(tableView: UITableView, viewFo
浏览 0提问于2015-07-13得票数 0
1回答
我想拖动位于画布上的文本，我找到了一个教程如何拖动一个Rectange，但是我无法在文本上实现它，这是下面的移动矩形的代码，有人能帮我在文本上实现它吗？
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas&#
浏览 3提问于2011-02-16得票数 4
1回答
我面临的问题是，当我点击一个按钮来显示这个元素时，在IE10上它并没有显示出来。我通过JavaScript添加了display: block属性，这就是为什么它不在CSS中的原因。它可以在除IE之外的所有其他浏览器上运行。
如果我删除过渡，它就会显示出来。
section {
display: none;
position: relative;
top: 50%;
margin: 0 auto;
width: 400px;
transition: all 0.5s linear;
transform: translate(0,-300%)
浏览 2提问于2014-11-26得票数 0
2回答
我有两个这样的div标签：
<div class="cl1">
<div class="cl2">
<canvas id="testcanvas"/>
</div>
</div>
div.cl1在css中具有宽度和高度
width: 100%;
height: 100%;
div.cl2没有，我猜它将使用默认的宽度和高度。
但当我用这个
width: 100%;
height: 100%;
在canvas#testcanvas中，它的高度不是div.cl1的100%，
浏览 2提问于2017-08-19得票数 0
我已经使用下面的代码在我的页面中生成了网格的屏幕截图。下面代码中的“gridBody”是一个DOM对象。
html2canvas(gridBody ,{
onrendered:function(canvas){
var img = canvas.toDataURL();
window.open(img);
}
});
但它给出了一个错误：
未捕获的函数:未定义的不是函数(html2canvas.js:
浏览 2提问于2014-08-06得票数 3
1回答
矩形数组
、、
我在显示数组中的矩形时遇到了困难。代码如下：
Dim recs(9) As PowerPacks.RectangleShape
Dim canvas As New Microsoft.VisualBasic.PowerPacks.ShapeContainer
Private Sub Spi_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim sz As Integer = 350
canvas.Parent = Me
recs(0).Height = sz
recs(0).Wid
浏览 2提问于2014-05-07得票数 0
1回答
有没有人可以解释为什么这不工作，我尝试了不同的可能性，如外部和内部css，但没有用。一定要提点建议，谢谢。 #intro {
width: 100%;
position: relative;
background: url("C:\Users\manas\OneDrive\Desktop\project newbiz\image\intro-bg.png") center bottom no-repeat;
background-size: cover;
padding: 200px 0 120px 0;
} <section id="i
浏览 17提问于2019-03-04得票数 0
我猜我很愚蠢，但我不明白一些新的HTML5标签背后的原因是什么。
一些标签，如<audio>和<canvas>，为浏览器提供了一些很好的新功能，但其他标签，如<article>、<section>等，只是以<div>或<span>的形式出现。那么，为什么要在HTML5中添加这些标签呢？
我做了这个jsfiddle：。至少在Chrome中，没有令人兴奋的布局或其他东西。可以只使用<span> / <div>。
那么，那些没有添加新功能的HTML5标记有什么用呢？
浏览 3提问于2011-04-01得票数 2
回答已采纳
3回答
我就是不明白为什么我的背景图片没有显示在导航栏的右上角。移动视图显示图像，但我的桌面视图显示为空白。仅供参考，我使用的是wp starter主题FoundationPress。任何指导都将不胜感激！谢谢。
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<?php do_action('foundationPress_layout_start'); ?>
<nav class="tab-ba
浏览 1提问于2014-07-23得票数 0
我正在生成一个pdf在iframe.In查看页面源代码没有内部文本的pdf，只有iframe标签显示
<iframe id="Iframe1" src = "/demo/22.pdf" width='600' height='600' allowfullscreen webkitallowfullscreen></iframe>
但是在firebug中，所有的文本都会显示出来，当我通过firebug检查pdf中的一行时，显示的内容如下
<div style="position: absol
浏览 2提问于2014-08-27得票数 0
我希望我的单选按钮和标签在同一水平线上。我使用xmp标签将原始html显示为带有单选按钮的选项。但xmp中的文本从新行开始。有没有替代xmp标签的方法？
`<input class="answer" type="radio" name="q3" value="0">
<label><xmp>The <head> section</xmp></label>
<br></br>
浏览 1提问于2019-02-13得票数 0
1回答
我今天从Tkinter开始，我遇到了一些问题。我的目标是打开一个窗口，该窗口加载一个csv文件，并输出列名作为按钮，输出行作为每个值的标签。现在我希望能够向下滚动标签。
我研究了这个主题，我现在明白了，在我能够添加滚动条之前，我需要框架我的按钮和标签。使用下面的代码，我无法滚动，滚动条向下滚动到列表的末尾(而不是窗口的末尾)。
现在，我的输出如下所示：
并显示以下错误消息：
TclError: unknown option "-yscrollcomand"
我的代码：
def open():
# add new Window
root1 = Toplevel()
浏览 22提问于2020-05-24得票数 0
回答已采纳
我想做这样的事情……
body{
display:none;
}
#signIn_form_section{
display:inline;
}
当然，这不起作用，但我正在寻找类似的东西。基本上，我想将允许显示的标签列入白名单。
在jfiddle中添加了html ...
基本上，我只想让表单和非隐藏输入字段显示出来。
浏览 0提问于2013-10-23得票数 0
谁能解释为什么在每个标签中放置页边距仍然在文章和标题标签之间留出一个空格，但是当我使用*选择器时，空格就会被删除。我不一定要有零位的所有元素。我宁愿把我想要的每一个都设为0。
下面的代码片段1在标题和文章标记之间留出一个空格。
body
{
background-color: yellow;
margin: 0 0 0 0;
}
#header
{
background-color: blue ;
margin: 0 0 0 0;
width: 100%;
height: 40px;
border: 3px solid black;
}
#article
{
background-colo
浏览 5提问于2014-06-03得票数 1
回答已采纳
1回答
我正在构建一个简单的python程序来使用tkinter创建一个窗口，其背景存储在计算机上的图像中。
I第一次做了一个全尺寸的窗口并显示出来。
我在这个窗口放了张帆布
，然后我使用了photoimage类并使用了png图像。然后我把这个贴在标签上。
在这一点上，当我运行代码时，它运行得非常完美。
，我试图在标签上方添加一个按钮，现在发生的情况是，带有图片的标签缩小了，按钮周围几乎看不到图片。
这是我的代码：
from tkinter import *
import pyautogui as pag
def act():
print("Hey")
##acti
浏览 2提问于2020-08-26得票数 1
1回答
我试图将一系列的画布元素设置为与它们的容器相同的高度：
$(document).ready(function() {
var c = $('.canvas canvas');
var container = $(c).parent();
$(window).resize(respondCanvas);
function respondCanvas() {
c.each(function(index) {
$(this).attr('width', $(container[index]).width());
浏览 2提问于2015-01-24得票数 2
回答已采纳
做完后
$view.offset({
left : X, //X is the same each time
top : this.y
});
console.log($view.offset()); //outputs what it should
有几个对象。我(在firebug中)看到了以下html代码
<div id="4017" class="text-block" style="position: relative; top: 2px; left: 22px;">
<div id="4043
浏览 2提问于2012-11-22得票数 1
回答已采纳
html
<div class="m-widget14">
<div class="m-widget14__header">
<h3 class="m-widget14__title">
Insurance details
</h3>
<span class="m-widget14__desc">
&l
浏览 0提问于2020-01-27得票数 1
1回答
有一个iframe on ，我想从video标签中得到一个截图，所以我必须到达iframe标签中的视频标记。
当我打开控制台并运行以下代码时：
const videoElement = document.getElementsByTagName('iframe')[0]
.contentWindow.document.getElementsByTagName('video')[0];
//Extracting picture from video tag
const canvas = document.createE
浏览 1提问于2019-05-24得票数 4
我使用clmtrackr来跟踪我的脸，但当我将video标签的宽度设置为100%时，它无法跟踪我的脸。我尝试将画布标签的宽度设置为与视频标签的宽度相同，但仍然不起作用。
<div style="text-align:center;">
<div style="border: 1px solid #ccc; display:inline-block; position:relative;">
<video id="inputVideo" width="100%" height=&
浏览 2提问于2017-08-25得票数 1
1回答
为什么我的网站使用laravel 4在facebook画布上显示空白页面？
我有这条路
Route::get('/','HomeController@getIndex');
我把https://www.mysite.com/canvas/放在facebook的应用程序设置中
当我访问链接时，它会显示我网站的内容，但在我的facebook画布上，它并没有显示出来。只有一页空白。为什么会发生这种情况？有什么问题吗？
浏览 1提问于2014-01-27得票数 1
回答已采纳
我在画布中有一些元素，当它们中的任何一个被选中时，我会在PropertyGridControl中显示它们的属性。
当我将ShowProperties=设置为“all”时，所有的属性都会显示出来，并且Canvas.Top和Canvas.Left都在那里，但是当我通过ShowProperties="WithPropertyDefinitions“手动显示属性时，这些属性就不会显示出来了。我怎样才能让它们出现？
<dxprg:PropertyDefinition Path="Canvas.Top" />
<dxprg:PropertyDefinition P
浏览 0提问于2019-10-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
