2D渲染上下文的訪問（三）
阿新 • • 發佈：2018-12-12
第一步
必須在body中建立一個canvas元素，這個很簡單，主要在建立的時候可用屬性width和height設定大小，預設為300,150
程式碼如下（寬500 高500）；id必須命名；
<body> <!-- 頁面的主題內容均在這裡 -->
<canvas width="500" height="500" id="mycanvas"></canvas>
</body>這個時候網頁是沒有任何東西的
第二步
繪圖是畫素的操作，因此需要定位畫素，規定畫布原點為左上角，為（0,0）
如下圖（笛卡爾座標系）
第三步
需要做出2d渲染上下文的訪問介面，在JavaScript中加入以下程式碼（其中的var canvas = $("#mycanvas"); 必須與canves的id屬性一致）
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); }); </script>
這樣訪問2d渲染上下文的工作就做完了！
第四步
呼叫函式畫一個矩形表示2d渲染上下文介面驗證訪問成功。畫一個以（10,10）為原點（左上角）的寬100，高100的矩形
程式碼如下：
<script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.fillRect(10,10,100,100); <!-- 一個畫圖函式，這裡不用先知道--> });
效果圖：
