Question

我正在学习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);

Answer 1

这是

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：画布没有绘制任何东西

1 个答案: