Vẽ trên Canvas bằng JavaScript
Tất cả các bản vẽ trên canvas HTML phải được thực hiện bằng JavaScript
Thí dụ
Tự mình thử »Bước 1. Tìm phần tử Canvas
Trước hết, bạn phải tìm phần tử
Điều này được thực hiện bằng cách sử dụng phương thức HTML DOM getElementById[]
var canvas = tài liệu. getElementById["myCanvas"];
Bước 2. Tạo đối tượng vẽ
Thứ hai, bạn cần một đối tượng vẽ cho canvas
getContext[] là một đối tượng HTML có sẵn, với các thuộc tính và phương thức để vẽ
var ctx = vải. getContext["2d"];
Bước 3. Vẽ trên Canvas
Cuối cùng, bạn có thể vẽ trên canvas
Đặt kiểu tô của đối tượng vẽ thành màu đỏ
ctx. fillStyle = "#FF0000";
Thuộc tính fillStyle có thể là màu CSS, độ dốc hoặc mẫu. fillStyle mặc định là màu đen
Phương thức fillRect[x,y,width,height] vẽ một hình chữ nhật, được tô kiểu tô, trên canvas
ctx. fillRect[0, 0, 150, 75];
Sau khi thực hiện cài đặt xong thư viện, ta bắt đầu khởi động tạo một Canvas Instance bằng hàm createCanvas[] - tại đây cho phép chúng ta nhập thông số lần lượt là
- chiều rộng [bắt buộc]. canvas width
- chiều cao [bắt buộc]. chiều dài canvas
- loại [tùy chọn]. Kiểu khởi tạo đối tượng, có thể là pdf, svg hoặc hình ảnh [mặc định]
Sau khi chúng ta tạo ra một thể hiện với một chiều dài cố định kích thước, chúng ta có thể coi như đó là một mặt phẳng vẽ mà chúng ta sẽ thao tác cùng. Trên mặt phẳng đó, ta có thể định nghĩa lên một hoặc nhiều bối cảnh - đóng vai trò như một cảnh nhỏ trong mặt phẳng, cung cấp các phương thức để thực hiện các thao tác, cấu hình lên các phần tử của bản vẽ. Canvas Instance sau khi được khởi động hoàn toàn trống. Do đó, để thực hiện hiển thị, ta bắt buộc phải tạo một bối cảnh bằng phương thức getContext["2d"] của phiên bản Canvas và sử dụng các thuộc tính của ngữ cảnh được vẽ lên chúng.
Thuộc tính cơ bản trong ngữ cảnh
Sau đây, mình sẽ giới thiệu một số thuộc tính cơ bản của ngữ cảnh, các yếu tố chủ yếu hỗ trợ khởi động và thao tác với văn bản
điềnStyle. là một thuộc tính cho phép bạn xác định màu nền, độ dốc hay kiểu mẫu được sử dụng trong bản vẽ. Chú trọng, mọi người sử dụng nó vì mục đích đổ màu nền nhiều hơn cả
điềnRect. là một thuộc tính giúp bạn vẽ một hình chữ nhật - cái mà sẽ được "tô vẽ" xuôi fillStyle đã được định nghĩa trước đó
Argument with
font: "font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit"
- nét chữ. là một thuộc tính định nghĩa kiểu văn bản được hiển thị trong canvas dưới dạng chuỗi tương tự như chuỗi được sử dụng trong CSS
font: "font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit"
Ngoài việc sử dụng các phông chữ mặc định như. Times New Roman, Arial, Helvetica,. Bạn cũng có thể tự động chèn một phông chữ bất kỳ vào hình ảnh của mình bằng cách sử dụng hàm registerFont[] của canvas
registerFont[path , {family: fontName}];
Theo đó, đường dẫn sẽ là đường dẫn đến tệp chữ chữ mà bạn muốn chèn [có thể ở định dạng otf, ttf,. ] và fontName sẽ là tên phông chữ mà bạn có thể tùy ý định nghĩa để sử dụng trong tập lệnh
- căn chỉnh văn bản. là một thuộc tính quy định vị trí của văn bản
context.textAlign = "left" || "right" || "center" || "start" || "end";
Ở đây, ngoài các vị trí như left, right hay center đã quá quen thuộc thì còn xuất hiện thêm hai giá trị start và end sẽ liên quan đến hướng của văn bản
- bắt đầu. vị trí bắt đầu văn bản - sẽ tương tự như trái nếu hướng văn bản chạy từ trái qua phải và ngược lại
- chấm dứt. vị trí kết thúc văn bản - sẽ tương tự như bên phải nếu hướng văn bản chạy từ trái qua phải và ngược lại
Hiện tại, chúng ta chủ yếu sử dụng các trình duyệt LTR [từ trái sang phải] nên có thể coi như mặc định start ~ left, end ~ right
Ở đây chúng ta có một định nghĩa về "hướng". Hướng của văn bản trong canvas được định nghĩa bởi các tham số sau
ctx.direction = "ltr" || "rtl" || "inherit";
in which
- ltr. theo hướng trái qua phải
- rtl. the direction must qua left
- kế thừa [mặc định]. is direction kế thừa từ bản gốc
- điền văn bản. là một thuộc tính của định mức và vị trí của văn bản được hiển thị
fillText[text: string, x: number, y: number, maxWidth?: number]
in which
- chữ. nội dung văn bản được hiển thị
- [x,y]. độ của văn bản trên hình vẽ
- chiều rộng tối đa. max wide width which the text can be display
Áp dụng các thuộc tính trong JS
Bây giờ, mình nói khá nhiều về lý thuyết của các thuộc tính. Bây giờ mình sẽ tự tạo một ví dụ nhỏ về việc mình kết hợp các thuộc tính để các bạn dễ hình dung hơn nhé
Đầu tiên, mình sẽ "trải" một mặt phẳng xám có diện tích 300x300 để bắt đầu xử lý
import { createCanvas } from "canvas";
import * as fs from "fs";
export const initCanvas = [] => {
const canvas = createCanvas[300, 300]; // create Canvas Instance
const context = canvas.getContext["2d"]; // create context
context.fillStyle = "#f4f4f5";
context.fillRect[0, 0, 300, 300];
const imageBuffer = canvas.toBuffer["image/png"];
fs.writeFileSync[`./canvas.png`, imageBuffer];
return;
};
Sau đó, mình tìm thấy một phông chữ Tharon khá thú vị nên tải chúng về và đặt và thư mục tĩnh. Sau đó, sử dụng đoạn mã sau để viết chữ lên mặt phẳng Canvas
import { createCanvas, registerFont } from "canvas";
import * as fs from "fs";
export const initCanvas = [] => {
const canvas = createCanvas[300, 300];
const context = canvas.getContext["2d"];
registerFont[`./static/fonts/Tharon.otf`, {
family: "Tharon",
}];
context.fillStyle = "#f4f4f5";
context.fillRect[0, 0, 300, 300];
context.font = "50px Tharon";
context.fillStyle = "black";
context.textAlign = "center";
context.fillText["Center", canvas.width / 2, canvas.height / 2];
const imageBuffer = canvas.toBuffer["image/png"];
fs.writeFileSync[`./canvas.png`, imageBuffer];
return;
};
Và đây là kết quả ban đầu mình nhận được
Một ví dụ khác về việc hiển thị các vị trí khác nhau của văn bản theo từng giá trị thuộc tính textAlign
________số 8And here is results
Ở đây, mình có vẽ thêm 1 đường phân chia để các bạn có thể quan sát dễ dàng nhất vị trí tương quan của các văn bản. Mình sẽ nói rõ hơn về công việc vẽ các hình họa ở bài viết sau nhé
Kết luận
Trên đây là những kiến thức ban đầu giúp các bạn tiếp cận với Canvas Node Module =]] Mình sẽ cùng các bạn tìm hiểu thêm những điều thú vị về Canvas ở các bài viết sau nhé. Unknown date