我想爲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」。有沒有一種方法可以創建畫布，並且還可以製作一個沒有這些雜亂東西的程序？或者，如果這是不可能的，有人可以指我一個圖書館，可以嗎？非常感謝！

來源

2016-11-30 Caleb Bertrand

不太確定問題是什麼。但根據我的理解，您需要了解如何將畫布添加到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'之類的東西。我不推薦圖書館，我建議你先學習正確的基本知識。然後，您可以繼續探索其他選項。

來源

2016-11-30 05:09:39 Ishara

現予以更正。感謝您指出這一點。 – 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>

來源

2016-11-30 05:10:14 enhzflep

好的。因此，我認爲畫布元素起初會有點煩人。我還有一個問題：真正的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，但我不知道如何設置畫布

回答

相關問題