我正在尝试创建一个带有f fable和p5.js的网页。我有
setup
和
draw
函数声明正确,并且在html中引用了p5.js。但是似乎什么也没用
设置
函数从未被调用,因此
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>
