我正在学习 HTML5。我想在我的网站上放一 block Canvas 并在上面画东西。但 Canvas 仍然是空白的。我在 Firefox、Chrome 和 IE 中运行了代码，但 Canvas 在所有浏览器中都是空白的。我做错了什么吗？
HTML 文件:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RAMEN</title>
<link rel="stylesheet" href="ramenStyle.css">
<script src="mainScript.js"></script>
</head>
<body>
<div id="main_div">
<header id="main_header">
<h1>RAMEN</h1>
</header>
<nav id="menu">
<ul>
<li>about</li>
<li>history</li>
<li>availability</li>
<li>flavors</li>
<li>worldwide</li>
</ul>
</nav>
<div id="sub_div">
<section id="main_section">
<canvas id="canvas" width="600" height="400">
</canvas>
<article id="article1">
<header>
<hgroup>
<h4>About Ramen</h4>
</hgroup>
</header>
<p id="about">
Ramen is a Japanese noodle soup dish. It consists of Chinese-style wheat noodles served in a meat- or (occasionally) fish-based broth, often flavored with soy sauce or miso, and uses toppings such as sliced pork, dried seaweed, kamaboko, and green onions. Nearly every region in Japan has its own variation of ramen, from the tonkotsu (pork bone broth) ramen of Kyushu to the miso ramen of Hokkaido.
</p>
<footer>
-wikipedia
</footer>
</article id="article2">
<article>
<header>
<hgroup>
<h4>History of Ramen</h4>
</hgroup>
</header>
<p id="history">
The origin of ramen is unclear. Some sources say it is of Chinese origin.Other sources say it was invented in Japan in the early 20th century. The name ramen is the Japanese pronunciation of the Chinese lamian. Until the 1950s, ramen was called shina soba, literally "Chinese soba") but today chūka soba, also meaning "Chinese soba") or just Ramen are more common, as the word (shina, meaning "China") has acquired a pejorative connotation.
</p>
<footer>
-wikipedia
</footer>
</article>
</section>
<aside id="side">
<h3>News</h3>
<p>
Pictures of Ramen coming soon!
</p>
</aside>
</div>
<footer id="main_footer">
Copyright Raj 2015 (rkjha3396@gmail.com)
</footer>
</div>
</body>
<html>
Javascript 文件:-
function f()
{
var x=document.getElementById('canvas');
canvas=x.getContent('2d');
canvas.fillRect(10,10,100,200);
canvas.shadowOffsetX=4;
canvas.shadowOffsetY=4;
canvas.shadowBlur=6;
canvas.shadowColor='rgba(0,0,255,.5)';
canvas.font="bold 36px Tahoma";
canvas.textAlign="end";
canvas.fillText("Ramen noodles super good!", 300, 100);
}
window.addEventListener("load", f, false);
最佳答案
这是
x.getContext('2d');
不是
x.getContent('2d');
function f() {
console.log('x');
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.fillRect(10, 10, 100, 200);
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.font = "bold 36px Tahoma";
canvas.textAlign = "end";
canvas.fillText("Ramen noodles super good!", 300, 100);
}
window.addEventListener("load", f, false);<div id="main_div">
<header id="main_header">
<h1>RAMEN</h1>
</header>
<nav id="menu">
<ul>
<li>about</li>
<li>history</li>
<li>availability</li>
<li>flavors</li>
<li>worldwide</li>
</ul>
</nav>
<div id="sub_div">
<section id="main_section">
<canvas id="canvas" width="600" height="400"></canvas>
<article id="article1">
<header>
<hgroup>
<h4>About Ramen</h4>
</hgroup>
</header>
<p id="about">Ramen is a Japanese noodle soup dish. It consists of Chinese-style wheat noodles served in a meat- or (occasionally) fish-based broth, often flavored with soy sauce or miso, and uses toppings such as sliced pork, dried seaweed, kamaboko, and green
onions. Nearly every region in Japan has its own variation of ramen, from the tonkotsu (pork bone broth) ramen of Kyushu to the miso ramen of Hokkaido.</p>
<footer>-wikipedia</footer>
</article id="article2">
<article>
<header>
<hgroup>
<h4>History of Ramen</h4>
</hgroup>
</header>
<p id="history">The origin of ramen is unclear. Some sources say it is of Chinese origin.Other sources say it was invented in Japan in the early 20th century. The name ramen is the Japanese pronunciation of the Chinese lamian. Until the 1950s, ramen was called
shina soba, literally "Chinese soba") but today chūka soba, also meaning "Chinese soba") or just Ramen are more common, as the word (shina, meaning "China") has acquired a pejorative connotation.</p>
<footer>-wikipedia</footer>
</article>
</section>
<aside id="side">
<h3>News</h3>
<p>Pictures of Ramen coming soon!</p>
</aside>
</div>
<footer id="main_footer">Copyright Raj 2015 (rkjha3396@gmail.com)</footer>
</div>关于javascript - HTML5 : Canvas not drawing anything，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33398766/