我正在尝试学习从 javascript 代码中提取的 HTML5 Canvas。
似乎我无法将 Javascript 代码与原始 html 分开。一直在寻找一些解决方案:
这些对我来说并不是一个解决方案,因为在我实现了这两个解决方案之后,在我看来是空白画布。
这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Christoper Hans' Paint HTML5 Project</title>
<link rel="stylesheet" type="text/css" href="paint.css">
<script type="text/javascript"><!--
window.addEventListener('load', function () {
var ctx = document.getElementById("paint").getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
function drawRect(ctx, x1, y1, x2, y2, fill) {
ctx.fillStyle=fill;
ctx.fillRect(x1, y1, x2, y2);
}
drawRect(ctx, 100, 100, 200, 250, "FF0000");
}, false);
// --></script>
</head>
<body>
<canvas id="paint" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
我不知道为什么,但只有我从该网站的帖子中获得的这种代码有效,我无法将 javascript 与外部文件分开。
TL;DR :想要将 javascript 与 html 分开以使用画布。
有帮助吗?