gpt4 book ai didi

javascript - 将上下文传递给函数 [Javascript 图形]

转载 作者:行者123 更新时间:2023-11-28 15:55:05 25 4
gpt4 key购买 nike

我有一个如下所示的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet"
type = "text/css"
href = "landscape.css" />
</head>
<body>
<h1 id = "heading">My Landscape</h1>
<canvas id = "landscape" width = "800" height = "600">
landscape
</canvas>
<script type = "text/javascript"
src = "landscape.js">
</script>
</body>
</html>

这是 Landscape.js:

var canvas = document.getElementById('landscape');
var context = canvas.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(20, 20, 150, 100);
var mySky = new sky(40, 40);
mySky.render(context);

function sky(x, y){

this.x = x;
this.y = y;

function render(theContext){

theContext.fillStyle = "#00ff00";
theContext.fillRect(x, y, 150, 100);

}

}

现在,第一部分 - “context.fillStyle =” 和“context.fillRect()” - 工作正常。它在我的浏览器中显示为红色矩形(顺便说一句,在 Mac 上使用 Firefox)。

但是当我尝试创建一个天空对象然后传递上下文来渲染它时,什么也没有发生。我不明白为什么它不会在天空对象上执行渲染函数。

我是否误解了 JS 对象的工作原理?

这是(非常简单的)CSS,以防有人想尝试运行它。

/* landscape.css */

#landscape{
border: 2px solid black;
}

最佳答案

这是因为您的渲染函数是私有(private),因为它只能从您的sky()函数内部访问。

为了使其正常工作,您需要提供外部可访问性(通过向 this 添加属性)

尝试

this.render = function(thecontext) {

}

关于javascript - 将上下文传递给函数 [Javascript 图形],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19234495/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com