Question

我一直在学习HTML5并参与了＃34; canvas＆＃34;元件。我试图创建自己的小画布，并且Javascript中指定的内容不会出现。这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas - One</title>
    <script type="text/JavaScript">
    var canvas = document.getElementById("canvas-one");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#990000";
    context.strokeRect(20, 30, 360, 240);
    context.fillRect("#990000")
    </script>
</head>
<body>
    <canvas id="canvas-one" width="360" height="240" style="border:1px">
        <p>You don't support the 'canvas' element? Better get to fixing that.</p>
    </canvas>
</body>

Answer 1

一个选项是将您的画布Javascript代码放在HTML正文的最末端：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas - One</title>
</head>
<body>
    <canvas id="canvas-one" width="360" height="240" style="border:1px">
        <p>You don't support the 'canvas' element? Better get to fixing that.</p>
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas-one");
        var context = canvas.getContext("2d");
        context.strokeStyle = "#990000";
        context.strokeRect(20, 30, 360, 240);
        context.fillRect(0, 0, 360, 240);
    </script>
</body>

jsFiddle：http://jsfiddle.net/ken92/1/

您需要确保已加载DOM，这将确保在canvas元素添加到DOM后运行画布初始化。

我还修正了您对fillRect的号码的错误。您的context.fillRect("#990000")不正确。 fillRect需要四个参数： fillRect(x, y, w, h)

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>Canvas - One</title>
</head>
<body>
    <canvas id="canvas-one" width="360" height="240" style="border:1px">
        <p>You don't support the 'canvas' element? Better get to fixing that.</p>
    </canvas>
</body>
<script type="text/JavaScript">
    var canvas = document.getElementById("canvas-one");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#990000";
    context.strokeRect(20, 30, 360, 240);
    contex.fillRect(20,20,150,100);
    </script>

试试这个。

您的代码中有两个错误，

fillRect（）方法中的给定参数。它应该像context.fillRect(x,y,width,height);
您将普通脚本放在头部，这不是当前问题的原因，但脚本在创建画布之前运行，因此您无法在画布中绘制任何内容。解决方案是使用onload方法中的脚本或将其放在body标签下面。

希望这有帮助。

谢谢。

Answer 3

这是一个可能有用的小提琴：Canvas

其中，js代码加载在onLoad事件中而不是更早！

var canvas = document.getElementById("canvas-one");
var context = canvas.getContext("2d");
context.rect(20, 30, 360, 240);
context.fillStyle="#990000";
context.fill();

使用 fill 方法，您无需重新定义rect的尺寸。

Answer 4

这是正确的方法。

Canvas是窗口的子窗口，因此必须首先加载窗口。

您也可以使用DOM。

window.onload = function(){
  var canvas = document.getElementById("canvas-one");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#990000";
    context.strokeRect(20, 30, 360, 240);
    context.fillRect(0, 0, 360, 240)
}

Canvas不会在HTML5中显示

4 个答案: