删除HTML画布边框 [英] Remove HTML canvas border
问题描述
我使用交互式动画定制我的主页 http://geotheory.co.uk/ ，但无法让页面看起来更无暇。我想删除动画画布对象的边框，因为这会造成不必要的滚动条。我尝试了各种样式选项，例如 border 和 padding ，但没有任何运气。该动画是处理脚本，然后翻译成。 index.html的内容如下：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> geotheory.co.uk< / title>
< style>
canvas：focus {outline：none;}
< / style>
< / head>
< body id =homebgcolor =blue>
< script src =processing-1.4.1.min.js>< / script>
< div id =canvasContainer>
< canvas data-processing-sources =rectangles.pde>< / canvas>
< / div>
< / body>
感谢您的协助。
我想你还没有重置浏览器的默认样式...所以你需要重置默认样式..使用这个
* {
margin：0;
padding：0;
}
解释：浏览器为某些元素提供填充和边距，以便重置它们你需要使用我告诉过你的其他风格，你也可以使用CSS reset
还可以使用 display：block; for < canvas> （如Kolink Said）
I'm customising my homepage http://geotheory.co.uk/ with an interactive animation, but having trouble making it feel more seemeless in the page. I want to remove the animated canvas object's border as this creates unnecessary scroll bars. I've tried various style options such as border and padding but without any luck. The animation is a Processing script that is then translated to javascript. The index.html reads:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>geotheory.co.uk</title>
<style>
canvas:focus{outline:none;}
</style>
</head>
<body id="home" bgcolor="blue">
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
Grateful for assistance.
I guess you've not resetted the browser default styles...So you need to reset the default styles.. Use this
* {
margin: 0;
padding: 0;
}
Explanation : Browser gives padding, margins to some elements, so inorder to reset them you need to use the style which I told you else you can also use CSS reset
And also use display: block; for <canvas> (As Kolink Said)
这篇关于删除HTML画布边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
