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

问题描述：

直到现在，我只在不需要任何HTML的环境中使用Javascript，比如可汗学院here。但是，现在我使用的是崇高的文本，并且我意识到我不能只写椭圆（）并将其显示在屏幕上。现在我需要这个元素。然而，根据w3schools，现在，对于一个圈露面，我需要这样做：我想为HTML5画布编写Javascript，但我不知道如何设置画布

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”。有没有一种方法可以创建画布，并且还可以制作一个没有这些杂乱东西的程序？或者，如果这是不可能的，有人可以指我一个图书馆，可以吗？非常感谢！

答

不太确定问题是什么。但根据我的理解，您需要了解如何将画布添加到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'之类的东西。我不推荐图书馆，我建议你先学习正确的基本知识。然后，您可以继续探索其他选项。

现予以更正。感谢您指出这一点。 – Ishara

答

虽然这种方法仍无法从知道canvas元素，让您畅行无阻的责任中解脱出来，你可以使用with关键字，以避免不断地打字ctx - 这种方法是不是一个我使用，并按照该MDN页面Statements and declarations>with您可能会遇到模糊不清的问题。

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>

好的。因此，我认为画布元素起初会有点烦人。我还有一个问题：真正的Javascript是什么样的？ ellipse（）函数实际上是否不存在？或者仅在某些库中使用ellipse（）函数，而幕后发生的实际Javascript是“ctx.arc ...”？ –

与编程和生活中的任何新对象或概念一样，随着人们对新环境更加熟悉，学习开始有点慢并且速度加快。（0）你会更清楚地看到它。（1）不，确切地说 - 那些图书馆将画布的复杂性抽象出来，并呈现出不同的手段（依赖本地的手段）与其交互。 MDN（Mozilla开发者网络）是一个真正的信息来源，更重要的是文档。您可能会发现以下链接有益处：[Canvas API]（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API） – enhzflep

您链接的可汗学院页面使用库[Processing .js]（http://processingjs.org/），所以你可以使用它。虽然我同意其他人的看法，但如果没有它，使用画布是值得学习的。 – Jon

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

相关推荐