HTML画布不显示我的矩形
[英]HTML Canvas not displaying my rectangles
问题描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect = (20, 30, 50, 250);
c.fillSyle = "white";
c.fillRect = (50,50,25,25);
};
</script>
</head>
<body>
<canvas id="map" width="800" height="400">
<img src="images/sad dinosaur.jpg" />
You will need an updated browser to view this page!
</canvas>
</body>
</html>
I am just tinkering a bit with canvas trying to get a feel for how it works. 
我只是稍微尝试一下画布，以尝试了解它的工作原理。 However, the tutorial video I am watching shows the coding for the c.fillRect and the c.fillStyle in the exact same format that i have shown in my code yet my screen only displays the black rectangle from the first set of instructions. 但是，我正在观看的教程视频以与我在代码中显示的完全相同的格式显示了c.fillRect和c.fillStyle的编码，但我的屏幕仅显示第一组指令中的黑色矩形。
1 个解决方案
解决方案1
1 已采纳 2014-10-08 16:20:33
The syntax for fillRect is c.fillRect(...) , as opposed to c.fillRect = (...) . fillRect的语法为c.fillRect(...) ，与c.fillRect = (...)相反。 Compare your last two calls with your first call. 将您的最后两个电话与您的第一个电话进行比较。
Also, your last fillStyle is mistyped as fillSyle . 另外，您的最后一个fillStyle被错误fillSyle为fillSyle 。
window.onload = function () {
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect(20, 30, 50, 250);
c.fillStyle = "white";
c.fillRect(50, 50, 25, 25);
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.