Ali*_*ice 0 html javascript canvas
<!doctype html>
<html>
<head>
<title>Canvas test</title>
</head>
<body>
<script type="text/javascript">
c = getElementById('canvas');
ctx = c.getContext("2d")'
ctx.fillRect(10,10,10,10);
</script>
<canvas id="canvas" height ="100" width = "100"></canvas>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我在Chrome和IE 9上试过这个,但它们都没有显示任何内容.你知道为什么这不起作用吗?
这可能是一些愚蠢的事情,我的朋友要求我发布这个,因为他懒得注册,但我自己无法理解.
您需要将代码放在onload
函数中.
例如:
window.onload = function() {
c = document.getElementById('canvas');
ctx = c.getContext("2d");
ctx.fillRect(10,10,10,10);
};
Run Code Online (Sandbox Code Playgroud)
这样做的原因是因为javascrpt代码将在渲染之前运行<canvas>
,并且您希望它在后面运行.
演示:http://jsfiddle.net/maniator/nCf7Y/