HTML5画布行未显示
[英]HTML5 Canvas Line not showing
问题描述
我目前正在按照本教程来画一条基本线（ http://www.sitepoint.com/html5-canvas-tutorial-introduction/ ）。 我已经尝试过Codepen（ http://codepen.io/anon/pen/qOEYaa ）
html
<canvas id="exampleCanvas" width="500" height="300">
<!-- OPTION 1: leave a message here if browser doesn't support canvas -->
Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.
<!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas -->
</canvas>
js
var canvas = document.getElementById('exampleCanvas'),
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(250,150);
context.stroke();
的CSS
canvas {
border: solid 1px #000;
}
黑线确实设法出现了。 使用浏览器时，我添加了html标记，但未显示任何行。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas = document.getElementById('exampleCanvas'),
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(250,150);
context.stroke();
</script>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="300" style="border:1px solid #000000;">
<!-- OPTION 1: leave a message here if browser doesn't support canvas -->
Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.
<!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas -->
</canvas>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2015-09-04 17:01:56
因为代码一直在处理中。
JavaScript尝试获取canvas元素的上下文时，canvas不存在。
将脚本代码放在正文的末尾，或在正文加载后在事件上调用绘制线。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="300" style="border:1px solid #000000;">
Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('exampleCanvas');
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(250,150);
context.stroke();
</script>
</body>
</html>
精灵未显示在html5画布上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.