Javascript 帆布赢了'；在HTML5中无法显示_Javascript_Html_Canvas

Javascript 帆布赢了'；在HTML5中无法显示

javascript html canvas

Javascript 帆布赢了'；在HTML5中无法显示,javascript,html,canvas,Javascript,Html,Canvas,我一直在学习HTML5，并开始学习“画布”元素。我试图创建自己的小画布，但是Javascript中指定的内容没有出现。代码如下： <!DOCTYPE html> <html> <head> <title>Canvas - One</title> <script type="text/JavaScript"> var canvas = document.getElementById("canvas-o

我一直在学习HTML5，并开始学习“画布”元素。我试图创建自己的小画布，但是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>


帆布-一
var canvas=document.getElementById（“canvas one”）；
var context=canvas.getContext（“2d”）；
context.strokeStyle=“#990000”；
strokeRect（20,30,360,240）；
context.fillRect（“990000”）
您不支持“canvas”元素吗？最好把它修好

这是正确的方法

画布是窗口的子窗口，因此必须首先加载窗口

您也可以使用DOM ready

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)
}

一个选项是将画布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>


帆布-一
您不支持“canvas”元素吗？最好把它修好
var canvas=document.getElementById（“canvas one”）；
var context=canvas.getContext（“2d”）；
context.strokeStyle=“#990000”；
strokeRect（20,30,360,240）；
fillRect（0,0,360,240）；

jsFiddle：

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

我还修复了您调用

fillRect

时出现的错误。您有

context.fillRect（#990000”）

，这是不正确的

fillRect

需要这样的四个参数：

fillRect（x，y，w，h）


帆布-一
您不支持“canvas”元素吗？最好把它修好
var canvas=document.getElementById（“canvas one”）；
var context=canvas.getContext（“2d”）；
context.strokeStyle=“#990000”；
strokeRect（20,30,360,240）；
内容完整（20,20150100）；

试试这个

您的代码中有两个错误

fillRect（）方法中的给定参数。它应该类似于

context.fillRect（x，y，width，height）


将普通脚本放在头部，这不是当前问题的原因，而是脚本在创建画布之前运行，因此无法在画布中绘制任何内容。
解决方案是在onload方法中使用脚本，或者将其放在body标记下面
希望这有帮助
谢谢。
这是一把可能有用的小提琴：
其中，js代码在onLoad事件中加载，而不是更早
var canvas = document.getElementById("canvas-one");
var context = canvas.getContext("2d");
context.rect(20, 30, 360, 240);
context.fillStyle="#990000";
context.fill(); 

通过使用填充方法，您无需重新定义rect的尺寸
 fillRect
需要完全不同的参数：这根本不能回答问题。OP在代码本身中有一些错误。（编辑：更好，但可能谈谈需要在fillRect中更改什么）我没有发现fillRect调用的错误。我修好了。我不确定OP调用fillRect的目的是什么。我认为OP的意思是在填充rect之前更改fillStyle。而且他们似乎想填满被撞击的区域<代码>context.strokeStyle=a；context.fillStyle=b；context.rect（…）；stroke（）；context.fill（）但这只是一个猜测。在我们从OP获得更多信息之前，我只能猜测。我更新了fillRect以填充画布的宽度和高度，并添加了一个JSFIDLE。fillRect方法中没有出现错误当然，但无论如何，我写的都是真的
var canvas = document.getElementById("canvas-one");
var context = canvas.getContext("2d");
context.rect(20, 30, 360, 240);
context.fillStyle="#990000";
context.fill();