Nhảy tới nội dung

my.createCanvasContext

createCanvasContext

my.createCanvasContext là API dùng để tạo ra canvas drawing context.

Canvas drawing context là một đối tượng với các thuộc tính và phương thức mà bạn có thể sử dụng để kết xuất hình ảnh trong component Canvas.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Khái niệm Path

Path là tập hợp các điểm được nối với nhau bằng các đoạn. Những đoạn này có thể là đường thẳng hoặc đường cong, … , độ dày khác nhau, màu sắc khác nhau. Path là cơ sở giúp để hình thành nên các hình trong canvas. Sau đây là các bước cơ bản dê vẽ một hình.

  1. Tạo ra path bằng phương thức beginPath().
  2. Sau đó dùng các phương thức vẽ để tạo ra những hình vẽ mà bạn muốn.
  3. Dùng stroke() để tạo ra đường viền cho hình hoặc fill() để tô màu cho hình nếu cân. Nếu vẽ text, không cần đến stroke() hoặc fill().
  4. Cuối cùng sử dụng draw() để kết xuất (render) hình vẽ trên canvas.
// in the .js file
const ctx = my.createCanvasContext('canvas');
ctx.rect(20, 20, 150, 50);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.rect(20, 50, 150, 40);
ctx.setFillStyle('yellow');
ctx.fillRect(20, 170, 150, 40);
ctx.rect(10, 100, 100, 30);
ctx.setFillStyle('red');
ctx.fill();
ctx.Draw();

Thuộc tính

Thuộc tínhKiểu dữ liệuMô tả
fillStylestringTô màu. Chức năng tương tự CanvasContext.setFillStyle().
strokeStylestringMàu đường viền. Chức năng tương tự CanvasContext.setStrokeStyle().
setStrokeStyle().numberĐộ dày đường. Chức năng tương tự CanvasContext.setLineWidth().
lineCapstringHình dạng của đầu đường thẳng. Nhận các giá trị = [square || butt || round]. Chức năng tương tự CanvasContext.setLineCap().
lineJoinstringHình dạng điểm cắt nhau giữa hai đường thẳng. Nhận các giá trị = [round || bevel || miter]. Chức năng tương tự CanvasContext.setLineJoin().
miterLimitnumberKhoảng cách tối đa giữa góc trong và góc ngoài khi 2 đường kẻ gặp nhau. Chức năng tương tự CanvasContext.setMiterLimit().
lineDashOffsetnumberVẽ nét đứt. Giá trị khởi tạo = 0 (nét liền mảnh).
textBaselinestringDùng để quy định vị trí text so với Baseline. Nhận các giá trị = [top || hanging || middle || alphabetic || ideographic || bottom]. Giá trị mặc định = Alphabetic. Chức năng tương tự với CanvasContext.setTextBaseline()
fontstringGiá trị mặc định = "10px Arial".
fontSizenumberKích thước font chữ. Chức năng tương tự CanvasContext.setFontSize()
textAlignstringCanh lề theo chiều ngang. Nhận các giá trị = [left || right || center || start || end]. Chức năng tương tự CanvasContext.setTextAlign().
globalAlphanumberĐộ trong suốt của marker. Nhận giá trị trong khoảng từ 0 đến 1; 0: độ trong suốt tuyệt đối (100% transparency); 1: độ đục tuyệt đối (100% opacity). Chức năng tương tự CanvasContext.setGlobalAlpha())
globalCompositeOperationStringQuy định cách thức một source shape (mới) sẽ được vẽ lên trên một destination shape (đã có sẵn) như thế nào.
Khi một source shape (mới) sẽ được vẽ lên trên một destination shape (đã có sẵn) như thế nào, thuộc tính.
---oOo---

Hiểu thêm về một số thuộc tính

Line Cap

Line Cap

Miter length

Miter Length

Baseline

Baseline

Thông thường nhắc đến Baseline, người ta sẽ liên tưởng đến đường (tưởng tượng) mà chân của các chữ cái hoa đều nằm trên nó. Đối với canvas, bạn có thể chọn baseline nằm ở top, hanging, bottom, … .

Nếu ideographic baseline (baseline của ký tự tượng hình) nằm ở vị trí thấp hơn alphabetic baseline (baseline của chữ cái Latin), thì ideographic baseline sẽ được tính là ideographic bottom luôn. Nói cách khác, baseline & bottom của ký tự tượng hình sẽ trùng nhau.

Phương thức

Phương thứcMô tả
CanvasContext.arcVẽ cung tròn hoặc đường tròn.
CanvasContext.arcToVẽ cung tròn đi qua 2 điểm.
CanvasContext.beginPathTạo ra một path. Gọi phương thức này trước khi vẽ một hình nào đó.
CanvasContext.bezierCurveToVẽ đường cong Bézier lập phương.
CanvasContext.clearRectXoá nội dung trong một vùng hình chữ trên canvas
CanvasContext.clipCắt (xén) một vùng có hình dạng bất kỳ từ canvas
CanvasContext.closePathĐóng lại một path.
CanvasContext.createCircularGradientTạo ra circular gradient. Điểm bắt đầu là tâm đường tròn; điểm kết thúc là vành đường tròn.
CanvasContext.createLinearGradientTạo ra linear gradient (chuyển màu tuyến tính).
CanvasContext.createRadialGradientTạo ra radial gradient. Điểm bắt đầu là vành đường tròn thứ nhất; điểm kết thúc là vành đường tròn.
CanvasContext.createPatternTạo ra một pattern cho một hình ảnh có thể lặp đi lặp lại theo một hướng nhất định.
CanvasContext.drawTiến hành vẽ hình trên canvas.
CanvasContext.drawImageVẽ hình ảnh với kích thước thực.
CanvasContext.fillĐổ màu cho hình ảnh đang vẽ của path. Màu mặc định: đen.
CanvasContext.fillRectVẽ và tô màu hình chữ nhật. Màu mặc định: đen.
CanvasContext.fillTextVẽ và màu màu text trên canvas. Màu mặc định: đen
CanvasContext.getImageDataSao chép (từng pixel) một vùng hình chữ nhật trên cavas. Dữ liệu trả về là một đối tượng ImageData.
CanvasContext.lineToTạo ra một điểm mới. Dùng stroke() nối điểm vừa tạo với điểm trước đó sẽ tạo thành đường thẳng.
CanvasContext.measureTextĐo chiều rộng của text. Đơn vị tính: pixel
CanvasContext.moveToDi chuyển path đến một điểm mà không tạo ra đường thẳng.
CanvasContext.putImageDataĐem toàn bộ dữ liệu (pixel) của một đối tượng ImageData vẽ lên trên canvas.
CanvasContext.quadraticCurveToTạo ra đường cong Bézier toàn phương.
CanvasContext.rectTạo ra hình chữ nhật.
CanvasContext.restoreKhôi phục lại trạng thái gần nhất của canvas được lưu lại (save()).
CanvasContext.rotateXoay hình vẽ đi một góc nhất định theo chiều kim đồng hồ
CanvasContext.saveLưu lại trạng thái của canvas
CanvasContext.scalePhóng to hay thu nhỏ hình vẽ theo chiều ngang và chiều dọc.
CanvasContext.setFillStyleChọn màu nền cho hình vẽ.
CanvasContext.setFontSizeChọn cỡ chữ.
CanvasContext.setGlobalAlphaChọn mức độ trong suốt của hình vẽ.
CanvasContext.setLineCapChọn hình dạng cho đầu đường thẳng.
CanvasContext.setLineDashChọn loại nét đứt.
CanvasContext.setLineJoinChọn hình dạng cho điểm nơi 2 đường thẳng gặp nhau.
CanvasContext.setLineWidthChọn đồ dày cho đường thẳng.
CanvasContext.setMiterLimitQuy định khoảng cách tối đa giữa góc trong và giữa góc trong và góc ngoài khi 2 đường kẻ gặp nhau.
CanvasContext.setShadowChọn vị trí và màu đổ bóng.
CanvasContext.setStrokeStyleChọn màu cho đường viền.
CanvasContext.setTextAlignQuy định cách căn lề (theo chiều ngang)
CanvasContext.setTextBaselineQuy định vị trí của text so với baseline
CanvasContext.setTransformCho phép thay đổi thay đổi kích cỡ, xoay, di chuyển và làm nghiêng hình vẽ.
CanvasContext.strokeVẽ viền cho path hiện tại. Màu mặc định: đen.
CanvasContext.strokeRectVẽ hình chữ nhật nhưng không tô màu.
CanvasContext.strokeTextVẽ text tại một vị trí cụ thể.
CanvasContext.toDataURLTruy xuất URL data của một vùng trên canvas.
CanvasContext.toTempFilePathXuất nội dung của canvas thành một tập tin hình ảnh, và trả về đường dẫn tập tin đó.
CanvasContext.transformCho phép thay đổi thay đổi kích cỡ, xoay, di chuyển và làm nghiêng hình vẽ.
CanvasContext.translateDịch chuyển gốc toạ độ.

Sample Code

Phương thức save()restore()

// .js file
const ctx = my.createCanvasContext('brown');
// save the default fill style
ctx.save();
ctx.setFillStyle('cyan');
ctx.fillRect(20, 20, 150, 100);
// restore to the previous saved state
ctx.restore();
ctx.fillRect(60, 60, 150, 100);
ctx.Draw();

Phương thức fillText()setFontSize()

const ctx = my.createCanvasContext('canvas');
ctx.setFontSize(42);
ctx.fillText('Hello', 30, 30);
ctx.fillText('Tiki', 200, 200);
ctx.Draw();

Phương thức transform()

const ctx = my.createCanvasContext('canvas');
ctx.rotate((45 * Math.PI) / 180);
ctx.setFillStyle('red');
ctx.fillRect(70, 0, 100, 30);
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);
ctx.Draw();