HTML5：画布无法绘制任何内容
[英]HTML5: Canvas not drawing anything
问题描述
我正在学习HTML5。 我试图在我的网站上放一块画布并在上面画一些东西。 但是画布仍然是空白的。 我在firefox，chrome和IE中运行了代码，但是在所有浏览器中画布都是空白的。 难道我做错了什么？
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);
1 个解决方案
解决方案1
2 已采纳 2015-10-28 18:27:25
它的
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>
HTML5 Canvas无法绘制
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.