我想为HTML5画布编写Javascript，但是我不知道如何设置画布

Question

到目前为止，我仅在不需要任何HTML的环境中使用Javascript，例如此处的 Khan Academy上的Javascript。 但是，现在我正在使用崇高的文本，并且我意识到我不能只编写ellipse（）并将其显示在屏幕上。 现在我需要元素。 但是，根据w3schools ，现在，要显示一个圆圈，我需要这样做：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

啊。 我真的不想在我编写的每一行代码之前都写“ ctx”，也不需要学习一堆新命令，例如“ beginPath”和“ lineTo”。 有没有一种方法可以创建画布，并且仍然可以在没有所有这些混乱内容的情况下创建程序？ 或者，如果不可能的话，有人可以指出我可以使用的图书馆吗？ 非常感谢！

Answer 1

不太清楚问题是什么。 但是据我了解，您需要学习如何将画布添加到HTML文件并将JS链接到同一个文件。 如果是这样，请按以下步骤操作。

HTML如下

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <title>Your Canvas Application</title>
  <!-- link your js file as below -->
  <script src = "path/to/yourjsfile.js">
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</body>

JS文件（yourjsfile.js）如下

window.onload = function () {
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");
c.beginPath();
c.arc(95,50,40,0,2*Math.PI);
c.stroke();
};

您确实不能完全摆脱'ctx'，但是可以将其缩短为'c'之类的东西。 我建议您首先学习正确的基础知识，而不是寻找库。 然后，您可以继续探索其他选项。

Answer 2

尽管这种方法仍然无法让您摆脱围绕canvas元素的出路的责任，但是您可以利用with关键字来避免连续输入ctx这种方法不是我使用的方法，并且按照MDN页面的Statements和声明>与您可能会遇到含糊不清的问题。

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); with (ctx) { beginPath(); arc(95,50,40,0,2*Math.PI); stroke(); }

 <canvas id='myCanvas'></canvas>

我想为HTML5画布编写Javascript，但是我不知道如何设置画布

问题描述

2 个解决方案

解决方案1
0 2016-11-30 05:09:39

解决方案2
0 2016-11-30 05:10:14

我想为HTML5画布编写Javascript，但是我不知道如何设置画布

问题描述

2 个解决方案

解决方案1 0 2016-11-30 05:09:39

解决方案2 0 2016-11-30 05:10:14

解决方案1
0 2016-11-30 05:09:39

解决方案2
0 2016-11-30 05:10:14