JavaScript是一門常用的腳本語言，使用JavaScript可以為網頁添加各種交互效果和動態特效。其中，Canvas是HTML5提供的繪圖標簽。它可以利用JavaScript在網頁上創建出新的圖形，可以用于制作游戲、動畫等。在Canvas中，ctx即為Canvas上下文對象，它是繪圖的核心之一。 ctx的基本概念 ctx的全稱為CanvasRenderingContext2D，它是Canvas畫布的環境對象。可以理解為，在Canvas上繪制的所有圖形都是在ctx上繪制的。首先，我們需要先獲取Canvas對象的上下文，即獲取CanvasRenderingContext2D對象。獲取方式為：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

通過canvas獲取ctx之后，我們就可以開始在Canvas上進行繪制了。 ctx的常用方法 ctx有非常多的方法，這里只介紹一些常用的方法。 1. 繪制直線 繪制直線的方法為lineTo()，它需要傳入兩個參數，即直線的終點坐標。例如，我們需要在Canvas上繪制一條水平直線，代碼如下：

ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

lineTo()需要在beginPath()和stroke()之間進行調用，其中strokeStyle表示線條的顏色。 2. 繪制矩形 繪制矩形的方法為rect()，它需要傳入四個參數，即矩形的左上角橫縱坐標和矩形的寬度和高度。例如，我們需要在Canvas上繪制一個紅色的矩形，代碼如下：

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

fillStyle表示矩形的填充顏色，fillRect表示實心矩形。 3. 繪制圓形 繪制圓形的方法為arc()，它需要傳入五個參數，即圓心的橫縱坐標、半徑、起始角度和終止角度。例如，我們要在Canvas上繪制一個黃色的圓形，代碼如下：

ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.fill();

arc()需要在beginPath()和fill()之間進行調用，其中Math.PI表示圓周率。 4. 繪制文字 繪制文字的方法為fillText()，它需要傳入三個參數，即文字內容、文字的橫縱坐標、最大寬度。例如，我們要在Canvas上繪制一段藍色的文字，代碼如下：

ctx.fillStyle = 'blue';
ctx.font = 'bold 30px Microsoft YaHei';
ctx.fillText('Hello World!', 50, 100);

fillStyle表示文字的顏色，font則表示文字的樣式。 總結 ctx是Canvas上下文對象，它是Canvas繪圖的核心之一。通過ctx，我們可以繪制出各種圖形和文字等。其中，常用的方法有lineTo、rect、arc和fillText等。掌握了這些方法，可以為Canvas的繪圖添加更加豐富的效果。