html canvas: cắt và văn bản

Question

Tôi đang làm việc trên ứng dụng vẽ bằng canvas, và tôi muốn cho phép người dùng tùy chọn vẽ chỉ trong một khu vực được chọn. để tôi có thể sử dụng phương thức clip(). nhưng nếu tôi muốn người dùng có thể vẽ các chữ cái bên trong - thì có cách nào để sử dụng clip() cho văn bản không? có cách nào khác để tôi có thể làm được không?

cảm ơn

Answer 1

Bạn có thể thực hiện việc này nhưng không sử dụng clip. Clip chỉ hoạt động với đường dẫn và văn bản không phải là đường dẫn.

Bạn sẽ cần phải sử dụng canvas thứ hai trong bộ nhớ (không phải trên trang) để đạt được hiệu quả. Sau đây là cách:

1. Hãy một canvas trong bộ nhớ, đặt nó vào một chiều rộng và chiều cao có khả năng chứa văn bản
2. Vẽ văn bản với vải trong bộ nhớ
3. thiết lập trong bộ nhớ bối cảnh của globalCompositeOperation để 'nguồn trong'
4. Vẽ điều bạn muốn cắt bớt các văn bản
5. sử dụng drawImage(in-memory-canvas, x, y) để đưa hiệu ứng mới được tạo ra vào vải bình thường của bạn