我正在尝试用F#寓言和p5.js创建一个网页。我正确地声明了setup
和draw
函数,并且在HTML中引用了p5.js。但是,似乎什么都不起作用:从未调用过setup
函数,因此也从未创建过canvas
。未显示任何错误消息。
以下是我正在使用的代码。
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
</html>
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import
[<Emit("fill($0)")>]
let fill (_: int): unit = jsNative
[<Emit("rect($0, $1, $2, $3)")>]
let rect (_: int) (_: int) (_: int) (_: int): unit = jsNative
[<Emit("frameRate($0)")>]
let frameRate (_: int): unit = jsNative
[<Emit("createCanvas($0, $1)")>]
let createCanvas (_: int) (_: int): unit = jsNative
let setup () =
createCanvas 500 500
frameRate 15
let draw () =
fill 255
rect 10 10 100 101
如果我使用与上面完全相同的HTML和等效的JS,它会像预期的那样工作,所以我假设Fable搞乱了我的工作。
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
<script>
function setup () {
createCanvas(500, 500)
frameRate(15)
}
function draw () {
fill(255)
rect(10, 10, 100, 101)
}
</script>
</html>
发布于 2018-06-05 03:38:10
根据@FyodorSoikin给出的提示,我搜索了文档并找到了how to add properties to JS objects。
因此,我向Browser.window
对象添加了两个相关的函数(即使它们成为全局函数):
Browser.window?setup <- setup
Browser.window?draw <- draw
现在一切都正常了。
https://stackoverflow.com/questions/50686704
复制相似问题