programming html

Html sang canvas hoạt động như thế nào?

Phần tử HTML5 cung cấp cho bạn một cách dễ dàng và mạnh mẽ để vẽ đồ họa bằng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo bố cục ảnh hoặc tạo hoạt ảnh đơn giản [và không đơn giản như vậy]

Đây là một phần tử đơn giản chỉ có hai thuộc tính cụ thể chiều rộng và chiều cao cộng với tất cả các thuộc tính HTML5 cốt lõi như id, tên và lớp, v.v.

Bạn có thể dễ dàng tìm thấy phần tử đó trong DOM bằng cách sử dụng phương thức getElementById[] như sau -

var canvas = document.getElementById["mycanvas"];

Chúng ta hãy xem một ví dụ đơn giản về cách sử dụng phần tử trong tài liệu HTML5

Điều này sẽ tạo ra kết quả sau -

Bối cảnh kết xuất

Ban đầu, nó trống và để hiển thị nội dung nào đó, trước tiên tập lệnh cần truy cập vào ngữ cảnh kết xuất và vẽ trên đó

Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để lấy ngữ cảnh hiển thị và các chức năng vẽ của nó. Hàm này nhận một tham số, loại context2d

Sau đây là mã để nhận ngữ cảnh bắt buộc cùng với kiểm tra xem trình duyệt của bạn có hỗ trợ phần tử hay không -

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Hỗ trợ trình duyệt

Các phiên bản mới nhất của Firefox, Safari, Chrome và Opera đều hỗ trợ HTML5 Canvas nhưng IE8 không hỗ trợ canvas nguyên bản

Bạn có thể sử dụng ExplorerCanvas để có hỗ trợ canvas thông qua Internet Explorer. Bạn chỉ cần bao gồm JavaScript này như sau -

Phần tử canvas HTML được sử dụng để vẽ đồ họa “raster” trên ứng dụng web. API Canvas cung cấp hai ngữ cảnh vẽ. 2D và 3D, và trong hướng dẫn này, chúng ta sẽ nói về cái 2D [tôi sẽ gọi nó là API Canvas cho đơn giản]

Trước khi bắt đầu, tôi muốn bạn biết một điểm rất quan trọng. Canvas là API đồ họa raster — bạn thao tác nội dung ở cấp độ pixel. Điều đó có nghĩa là phần mềm cơ bản không biết mô hình bạn đang sử dụng để hiển thị ngữ cảnh của bạn — nó không biết bạn đang vẽ hình chữ nhật hay hình tròn

Tôi đã chia API Canvas thành các phần riêng biệt để bạn có thể ngấu nghiến từng phần một

API đường dẫn
phong cách vẽ
Độ dốc và mẫu
Thao tác & hình ảnh pixel trực tiếp
phép biến hình
Vùng đánh
Trạng thái và phương thức clip[]

Thành lập

Để kích hoạt hướng dẫn Canvas của bạn, hãy tạo tệp HTML và tệp JS được liên kết với tệp đó



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

Trong tệp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

5 của bạn,

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Đường dẫn

Đường dẫn là tập hợp các điểm trong lưới pixel 2D trong canvas. Chúng được vẽ với sự trợ giúp của API này. Mỗi hình dạng trong đường dẫn mà bạn vẽ được tài liệu W3C gọi là "đường phụ"

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

6 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

7. Tất cả các hình dạng mà bạn vẽ được thêm vào đường dẫn hiện tại. Nếu bạn gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

8 hoặc

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

9 sau này, nó sẽ áp dụng điều đó cho tất cả các hình bạn đã vẽ trong đường dẫn hiện tại. Để ngăn chặn điều đó, bạn chia bản vẽ của mình bằng cách gọi

var canvas = document.getElementById["mycanvas"];

10 và

var canvas = document.getElementById["mycanvas"];

var canvas = document.getElementById["mycanvas"];

```
var canvas = document.getElementById["mycanvas"];
```
12. Biểu thị việc xây dựng một hình dạng mới bắt đầu tại điểm [x, y]
```
var canvas = document.getElementById["mycanvas"];
```
13. Vẽ một đường từ điểm cuối cùng trong hình dạng hiện tại đến điểm đã qua. Nếu không có hình nào được tạo [thông qua ________ 114 ], thì hình mới sẽ được tạo bắt đầu từ [x, y] [giống như ________ 114 ]
```
var canvas = document.getElementById["mycanvas"];
```
16 và
```
var canvas = document.getElementById["mycanvas"];
```
17. Vẽ một đường cong bezier bậc hai/khối lập phương bắt đầu từ điểm cuối cùng trong hình, đi qua các điểm kiểm soát [
```
var canvas = document.getElementById["mycanvas"];
```
18 và
```
var canvas = document.getElementById["mycanvas"];
```
19 ] và kết thúc tại
```
   
   
      
   
   
   
      
   
```
20. Đường cong Bezier chỉ là một đường cong “trơn tru” đi qua các điểm “kiểm soát” trung gian với các điểm kết thúc cho trước. Lưu ý rằng đường cong không nhất thiết phải đi qua chính xác các điểm kiểm soát — nó có thể được làm phẳng

21. Đây là một phương pháp hơi phức tạp để sử dụng. Giả sử điểm hiện tại trên đường đi là

22 — sau đó

23 sẽ vẽ một cung có hai tiếp tuyến nối hai cặp điểm này

24 và

25. Bán kính của cung sẽ là bán kính đã cho. Bán kính càng lớn, cung sẽ càng xa từ

26, [Xem Ví dụ 1. 2 cho hình ảnh rõ nét]. Nếu bạn chưa sử dụng

var canvas = document.getElementById["mycanvas"];

14, thì theo mặc định,

22 sẽ là

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

20. Kết nối điểm hiện tại trong đường dẫn [theo mặc định là

29 ] với phần đầu của cung. Nó vẽ cung từ tâm

20 bán kính

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

23 , từ

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

24 đến

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

25. [Ghi chú. Không giống như toán học trên giấy bút, các góc được mô tả theo chiều kim đồng hồ trong API Canvas];



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

24. Vẽ một hình chữ nhật có góc trên cùng bên trái

20 và chiều rộng



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

26 và chiều cao



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

ví dụ 1. 1

Bản trình diễn vải 1

Bây giờ chúng ta cần thử một bản demo — chúng ta sẽ vẽ một vài đường ngang ngẫu nhiên và sau đó là phác thảo một con mắt. Kết quả sẽ giống như một cái gì đó ở bên trái. Đừng quên xem qua mã và mày mò mã

ví dụ 1. 2

Bản trình diễn vải 2

Trong ví dụ bên dưới, tôi tạo một đường cong hình khối [có hướng dẫn trực quan],

23 cuộc gọi ở giữa bên phải và một người đàn ông đóng gói với



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

29 ở phía dưới bên trái. Các điểm kiểm soát [trong đường cong khối] là các góc được tạo bởi ba hướng dẫn

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

27 cho

23 là góc tạo bởi hai tiếp tuyến

var canvas  = document.getElementById["mycanvas"];

if [canvas.getContext] {   
   var ctx = canvas.getContext['2d'];   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

2Kiểu vẽ

Cho đến bây giờ, chúng ta đã vẽ những đường nét mỏng đơn giản. Các kiểu vẽ sẽ giúp chúng ta vẽ đẹp hơn rất nhiều

Lưu ý rằng bạn không thể áp dụng hai kiểu khác nhau trên cùng một đường dẫn. Ví dụ: nếu bạn muốn vẽ một đường màu đỏ và một đường màu xanh — bạn sẽ phải tạo một đường dẫn mới để vẽ đường màu xanh. Nếu bạn không tạo một đường dẫn mới, thì khi gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

8 lần thứ 2 sau khi đặt màu kiểu hiển thị của bạn thành màu xanh lam, cả hai đường sẽ có màu xanh lam. Do đó, các kiểu được áp dụng cho tất cả các đường phụ, cho dù chúng đã được vuốt hay chưa

Một vài thuộc tính của đối tượng ngữ cảnh 2D

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

73 được xác định cho mục đích này

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

74. Độ dày của các đường được vẽ. Theo mặc định, đây là 1;

```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
75. Đây là giới hạn được áp dụng ở cuối các đường phụ [hình]. Nó là một chuỗi và có thể có ba giá trị hợp lệ. “mông”, “tròn”, “vuông” [Xem Ví dụ 1. 3 cho hình ảnh rõ nét]. “butt” sẽ kết thúc các dòng không có nắp - dẫn đến các đầu cứng, trực giao giống như hình chữ nhật mỏng. "tròn" thêm một hình bán nguyệt vào các đầu để tạo ra các đầu mượt mà. "vuông" thêm một hình vuông vào cuối, nhưng nó trông giống như "mông". “tròn” và “vuông” thêm một chút độ dài cho mỗi đường phụ
```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
76. Điều này quyết định cách nối hai đường chồng chéo. Ví dụ: nếu bạn muốn tạo một mũi tên bên phải [>], thì bạn có thể thay đổi cách tạo góc với thuộc tính này. Điều này có ba giá trị hợp lệ. "tròn", "vát" và "miter". Kiểm tra ví dụ 1. 4 để biết cách họ thay đổi các góc. [Giá trị mặc định là “miter”]. "round" sẽ tạo thành các góc tròn, trong khi "bevel" sẽ tạo ra các góc cứng ba cạnh và "miter" sẽ tạo thành một cạnh sắc nét
```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
77. Khi ________ 578 , điều này quyết định khoảng cách tối đa giữa góc trong và góc ngoài của đường thẳng. Xem ví dụ 1. 4[b] để có hình ảnh rõ ràng. Nếu giới hạn vát quá cao, thì các mũi tên nhọn có thể có diện tích chung lớn b/w hai đường. Nếu giới hạn vát được vượt qua, thì màn hình sẽ quay lại thành một đường nối vát

ví dụ 1. 3 & 1. 4

Bản trình diễn Canvas 3–1. mông, 2. tròn, 3. Quảng trường

Trong ví dụ 1. 3 ở bên trái, bạn có thể thấy các dòng giới hạn dòng tròn & vuông dài hơn giới hạn mặc định như thế nào. [GHI CHÚ. Dòng càng dày, độ dài càng tăng]

Bản demo Canvas 4[a] — 1. lineJoin=”vòng”, 2. lineJoin=”bevel”

Canvas Demo 4[b]–1. miterLength=10, 2. miterLength=5. Cả hai đều đang sử dụng cách nối dòng mặc định — “miter”. Các dòng được sử dụng giống hệt nhau ở cả hai - trên và dưới. Giới hạn vát là khoảng cách lớn nhất giữa góc trong và góc ngoài. Khi hạ thấp nó, giới hạn vát được thông qua, làm cho phép nối vát được áp dụng.

Trong ví dụ 1. 4[a], bạn có thể thấy cách nối tròn và vát hoạt động. Các đường được tạo giống hệt nhau ở phần trên và dưới. Chỉ có thuộc tính ________ 576 là khác

Trong ví dụ 4. 1[b], bạn có thể thấy cách thức hoạt động của phép nối giảm nhẹ và điều gì sẽ xảy ra nếu độ dài giảm dần được thông qua

Các thuộc tính kiểu hiển thị bổ sung được xác định

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

40. Chuỗi này xác định cách bạn muốn tạo kiểu cho văn bản. Ví dụ:

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

41 là giá trị phông chữ hợp lệ

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

42. Các giá trị hợp lệ là — “bắt đầu”, “kết thúc”, “trái”, “phải” và “trung tâm”. Mặc định là “bắt đầu”

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

43. Các giá trị hợp lệ là — “top”, “hanging”, “middle”, “alphabetic”, “ideographic”, “bottom”. Mặc định là “chữ cái”

Phương pháp vẽ thực tế

Trong các ví dụ cho đến bây giờ, bạn có thể nhận thấy tôi đã sử dụng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

44 trước khi đóng từng đường dẫn. Phương pháp nét vẽ thực hiện một phần bản vẽ đó trong các ví dụ đó

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

8. Phương pháp này vẽ đường viền xung quanh mỗi đường phụ [hình dạng] theo

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

74 và các thuộc tính liên quan

```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
9. Phương pháp này lấp đầy phần bên trong của hình vẽ bởi đường dẫn. Nếu đường dẫn chưa được đóng, thì nó sẽ tự động đóng lại bằng cách nối điểm cuối cùng với điểm đầu tiên



    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

Đoạn mã trên không đóng tam giác [10,10],[50,50],[10,50] nhưng gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

48 sẽ lấp đầy nó như mong đợi

Tam giác đầy

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

49. Xóa các pixel trong hình chữ nhật được tạo với các tham số đã cho

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

50. Tương đương với việc gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

51 và sau đó là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

8. Nó không thêm hình chữ nhật vào đường dẫn hiện tại — do đó, bạn có thể thay đổi kiểu sau và gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

8 mà không ảnh hưởng đến hình chữ nhật đã tạo

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

54. Tương đương với việc gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

51 và sau đó là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

9. Điều này cũng không thêm hình chữ nhật vào đường dẫn hiện tại

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

57 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

58. Viết văn bản tại [x,y] theo thuộc tính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

59 /

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

50.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

51 là tùy chọn và xác định độ dài tối đa tính bằng pixel mà bạn muốn văn bản chiếm. Nếu văn bản dài hơn, thì nó được chia tỷ lệ thành phông chữ nhỏ hơn.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

52 có thể được sử dụng để tìm chiều rộng hiển thị của một đoạn văn bản, dựa trên

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

40 hiện tại

GHI CHÚ.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

50 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

59 là các thuộc tính có thể được đặt thành bất kỳ chuỗi màu CSS nào để đặt màu tô và màu nét

Độ dốc và mẫu

Ra khỏi hộp, bối cảnh 2D cung cấp độ dốc tuyến tính và xuyên tâm. Các phương thức

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

56 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

57 trả về các đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

58, sau đó có thể sửa đổi những gì chúng ta muốn

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

59. Xây dựng một gradient tuyến tính chạy trên dòng

22 đến

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

02. Tạo một gradient xuyên tâm chạy trong hình nón [của hình tròn] với đỉnh [hình tròn bên trong] bán kính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

03và đáy [hình tròn bên ngoài] bán kính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

04. Màu đầu tiên sẽ có bán kính là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

58 có một phương thức.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

07. Độ dốc bắt đầu từ 0 và kết thúc tại 1. Màu tại vị trí của

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

08 sẽ được đặt bằng phương pháp này. Ví dụ:

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

09 sẽ làm cho màu ở giữa có màu xanh lục. Màu sắc giữa hai điểm dừng liền kề sẽ được nội suy [hỗn hợp]

ví dụ 1. 6

Bản trình diễn Canvas 6–1. Đường dốc tuyến tính, 2. Vòng cung đầy gradient xuyên tâm

Trong ví dụ bên trái, bạn có thể thấy cách thức hoạt động của gradient tuyến tính và hướng tâm

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Bạn có thể thắc mắc điều gì sẽ xảy ra nếu

22 và

26 được cung cấp cho gradient tuyến tính/hướng tâm không bằng với đường/cung mà chúng ta tạo? . 7

ví dụ 1. 7

Bản trình diễn Canvas — 1. Đã dịch chuyển dòng 100px theo chiều ngang, 2. Đã dịch chuyển cung theo [10,10] xuống dưới cùng bên phải.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

4Thao tác & hình ảnh pixel trực tiếp

Đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

12 có thể được sử dụng để thao tác các pixel riêng lẻ. Nó có ba thuộc tính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

13. Chiều rộng của dữ liệu hình ảnh tính bằng pixel hiển thị trên thiết bị

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

14. Chiều cao của dữ liệu hình ảnh tính bằng pixel hiển thị trên thiết bị

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

15. Đây là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

16 [tài liệu MDN tại đây] chứa dữ liệu pixel riêng lẻ trong một chuỗi [R,G,B,A] byte cho pixel trên cùng đến pixel dưới cùng bên phải. Vì vậy, giá trị màu đỏ của pixel thứ n sẽ là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

17 , màu xanh lá cây sẽ là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

18 , màu xanh lam sẽ là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

19 và alpha sẽ là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

GHI CHÚ. Giá trị RGBA có thể được sử dụng để biểu thị màu — trong đó R, G, B là lượng màu đỏ, lục và lam và A là độ mờ [giá trị alpha]. Trong Canvas, các phần tử này có thể có bất kỳ giá trị số nguyên nào trong [0, 255]

Bạn có thể lấy đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

12 bằng các phương thức sau trong API Canvas

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

22. Điều này tạo ra một đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

12 có chiều rộng và chiều cao

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

24 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

25 , được xác định bằng pixel CSS. Tất cả các pixel sẽ được khởi tạo thành màu đen trong suốt [hex R,G,B=0, và cả A=0]

Các pixel CSS có thể ánh xạ tới một số pixel thiết bị thực khác do chính đối tượng hiển thị

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

26. Sao chép dữ liệu hình ảnh đã cho và trả về bản sao

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

27. Trả về một bản sao các điểm ảnh của canvas trong hình chữ nhật được tạo bởi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

28 trong một đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

12. Các điểm ảnh bên ngoài canvas được đặt thành màu đen trong suốt

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

30. [Bốn đối số 'bẩn' cuối cùng là tùy chọn]. Sao chép các giá trị pixel trong

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

31 vào hình chữ nhật canvas tại

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

32. Nếu bạn cung cấp bốn đối số cuối cùng, nó sẽ chỉ sao chép các pixel bẩn trong dữ liệu hình ảnh [hình chữ nhật được tạo thành tại ________ 533 có kích thước ________ 534 ]. Không vượt qua bốn đối số cuối cùng giống như gọi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Đối với tất cả các giá trị nguyên của x và y trong đó dirtyX ≤ x < dirtyX+dirtyWidth và dirtyY ≤ y < dirtyY+dirtyHeight, sao chép bốn kênh của pixel có tọa độ [x, y] trong cấu trúc dữ liệu
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
31 sang pixel có tọa độ [

ví dụ 1. 8

Bản trình diễn vải 1. 8[a] — Pixel ngẫu nhiên trong canvas 400x400

Tôi đã lấp đầy toàn bộ canvas 400x400 bằng các màu ngẫu nhiên [hoàn toàn mờ đục] bằng phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Lưu ý rằng việc sử dụng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

38 là không cần thiết để sử dụng API ImageData — bởi vì bạn không sử dụng API Canvas để tạo thành các hình dạng/đường cong

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Bản trình diễn Canvas 1. 8[b] — x bắt đầu với một giá trị ngẫu nhiên trong khoảng từ 1 đến y.

Bản trình diễn Canvas 1. 8[c] — x kết thúc ở một giá trị ngẫu nhiên lớn hơn giá trị ban đầu của nó.

Hình ảnh có thể được vẽ trực tiếp lên canvas.

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

39 có thể được sử dụng theo ba cách khác nhau để làm như vậy. Nó yêu cầu

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

40 làm nguồn pixel

Một
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
40 có thể là một trong những thứ sau — HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. Để sao chép vào canvas, bạn có thể sử dụng
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
42. Bạn cũng có thể sao chép canvas hiện có hoặc ảnh chụp màn hình của video

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

43. Sao chép nguồn hình ảnh vào canvas tại [dx,dy]. Toàn bộ hình ảnh được sao chép

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

44. Sao chép nguồn hình ảnh vào hình chữ nhật trong canvas ở [dx,dy] có kích thước [dw,dh]. Nó sẽ được thu nhỏ hoặc tăng tỷ lệ nếu cần thiết

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

45. Sao chép hình chữ nhật trong nguồn hình ảnh

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

28 vào hình chữ nhật trong canvas

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

47 và tăng hoặc giảm tỷ lệ nếu cần. Tuy nhiên, nếu hình chữ nhật

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

28 có các phần bên ngoài nguồn thực tế — thì hình chữ nhật nguồn được cắt bớt để bao gồm các phần gửi đến và hình chữ nhật đích được cắt bớt theo cùng một tỷ lệ;

ví dụ 1. 9

Ví dụ sao chép hình ảnh_______85

GHI CHÚ. Thêm phần này vào HTML của bạn —

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

0Biến đổi

Bây giờ chúng ta đang chuyển sang các phần thú vị của API Canvas

Canvas sử dụng ma trận chuyển đổi để chuyển đổi tọa độ đầu vào [x, y] thành tọa độ [x, y] được hiển thị. Lưu ý rằng các pixel được vẽ trước khi chuyển đổi không được chuyển đổi - chúng không bị ảnh hưởng. Chỉ những thứ được vẽ sau khi áp dụng phép biến đổi mới bị thay đổi

Có ba phương thức chuyển đổi được xây dựng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

49. Phương pháp này chia tỷ lệ đầu vào bằng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

50 theo hướng ngang và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

51 theo hướng dọc. Nếu bạn muốn phóng to hình ảnh theo hệ số ________ 552 , hãy vượt qua ________ 553. Để kéo giãn/bóp hình ảnh theo chiều ngang của

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

52 ,

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

55. Để kéo giãn/bóp hình ảnh theo chiều dọc bằng cách

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

52 ,

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

58. Xoay đầu vào một góc

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

59 theo chiều kim đồng hồ, tính bằng radian

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

60. Thay đổi đầu vào bằng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

ví dụ 2. 0

Vẽ hình ảnh đã chuyển đổi lên trên hình ảnh gốc. Tỉ lệ=2,2;

Trong ví dụ 2. 0, chú ý ảnh gốc còn nguyên vẹn như thế nào. Chỉ hình ảnh thứ hai [lớp phủ] được biến đổi bằng ba phương pháp — xoay, chia tỷ lệ, biến đổi

Để hoàn nguyên tất cả các biến đổi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

GHI CHÚ

Thay đổi thứ tự biến đổi có thể ảnh hưởng đến kết quả cuối cùng

Đối với người dùng nâng cao, bạn có thể muốn xem các phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

62 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

63. Điều này sẽ cho phép bạn đặt trực tiếp ma trận chuyển đổi 3D

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

64 và

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

65 không bị ảnh hưởng bởi biến đổi. Điều đó có nghĩa là nếu bạn vẽ một hình chữ nhật màu đen bằng cách sử dụng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

65, nó sẽ không bị biến đổi [xoay/thu nhỏ/dịch]

Vì việc thay đổi biến đổi chỉ hoạt động đối với các bản vẽ được thực hiện sau khi áp dụng nó, nên bạn không thể chia tỷ lệ/xoay/dịch trực tiếp canvas hiện có [cũng như

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

64 và sau đó là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

65]. Bạn có thể phải tạo một canvas ẩn khác có cùng kích thước — sau đó sao chép dữ liệu hình ảnh vào canvas thứ 2, sau đó sử dụng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

39 trên canvas thứ 2

Kiểm tra ví dụ này. https. //canvasdemo2d. github. io/ [nguồn. https. //github. com/canvasdemo2d/canvasdemo2d. github. i]. Di chuyển con trỏ của bạn qua canvas và xem những gì nó làm. Thật không may, nó sẽ không hoạt động trên điện thoại di động. Hiệu ứng xếp tầng là do tôi đang dịch canvas w. r. t chuột bằng cách sử dụng
```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
39.
```
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
```
39sau đó ghi vào cùng một canvas mà nó đang đọc, điều này gây ra kiểu lặp lại

Vùng đánh

Tính đến thời điểm viết bài [tháng 3 năm 2019], hỗ trợ cho các khu vực bị ảnh hưởng đang được thử nghiệm trong Chrome và trên Firefox. Trình duyệt di động thậm chí không hỗ trợ nó. Do đó, tôi sẽ giải thích cho bạn "cái gì" có thể được sử dụng để tấn công các khu vực.

Các vùng lần truy cập được sử dụng để nắm bắt các sự kiện con trỏ trên khung vẽ và biết "nơi" người dùng đã nhấp vào. Ví dụ: bạn có thể có hai hình chữ nhật A và B — khi người dùng nhấp vào A, bạn muốn thực hiện hành động $A và khi người dùng nhấp vào B, bạn muốn thực hiện hành động $B. Hãy xem qua toàn bộ quá trình

Một khu vực bị tấn công có liên quan đến ba điều này

Đường dẫn. Đường dẫn hiện tại khi vùng nhấn được tạo [ví dụ: hình chữ nhật]. Tất cả các sự kiện con trỏ bên trong đường dẫn được định tuyến đến vùng nhấn đó
ID. Một chuỗi id duy nhất để xác định vùng bị ảnh hưởng bởi trình xử lý sự kiện

Điều khiển. Một phần tử DOM thay thế [ chẳng hạn như

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

72 ] nhận các sự kiện con trỏ thay thế

GHI CHÚ. Đường dẫn được canvas tự động cung cấp khi thêm vùng truy cập mới. Chỉ một — id hoặc điều khiển — là cần thiết để tạo thành một vùng đánh

Các phương pháp thao tác danh sách vùng trúng của canvas là

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

73. Lấy một đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

74 và tạo thành một vùng truy cập được bao quanh bởi đường dẫn hiện tại. Đối số

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

75 phải là thuộc tính chuỗi

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

76 hoặc thuộc tính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

79. Xóa vùng truy cập có id

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

76 để nó không còn nhận bất kỳ sự kiện con trỏ nào nữa

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

81. Xóa tất cả các vùng bị ảnh hưởng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

GHI CHÚ. Các vùng lần truy cập không được hỗ trợ — nhưng điều đó không có nghĩa là bạn phải sử dụng chúng để nắm bắt các sự kiện con trỏ. Bạn có thể tạo “danh sách vùng bị tấn công của riêng mình” và biểu thị ranh giới của các vùng [vì bạn không thể lấy đường dẫn hiện tại từ khung vẽ, quá tệ]. Trong phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

82, lấy các thuộc tính

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

83 hiện tại và tìm kiếm trong danh sách vùng bị ảnh hưởng. Dựa trên vùng trúng đích chứa điểm, bạn có thể thực hiện hành động dự định

States và phương thức clip[]

Tiết kiệm trạng thái là một tiện ích được cung cấp bởi đặc tả W3C. Bạn có thể lưu trạng thái hiện tại của canvas và khôi phục sau

Bạn cũng có thể xây dựng một hệ thống như vậy [một phần] bằng cách viết mô hình JavaScript của riêng bạn. Nhưng bạn sẽ phải tiết kiệm khá nhiều thứ. ma trận chuyển đổi, danh sách vùng nhấn, thuộc tính kiểu, v.v. Hơn nữa, bạn không thể hoàn nguyên khu vực cắt [chúng ta sẽ chuyển sang phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

84 sau một thời gian] trực tiếp

GHI CHÚ. Các phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

85 /

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

86 không lưu và khôi phục bản vẽ/pixel thực tế. Họ chỉ lưu các thuộc tính khác

Do đó, tôi khuyên bạn nên sử dụng nhiều phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

85 &

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

86 để quay đi quay lại thay vì tự xóa nội dung hoặc tạo cơ chế tiết kiệm trạng thái của riêng bạn

Đối tượng

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

89 có ngăn xếp trạng thái được liên kết. Phương thức

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

85 sẽ đẩy trạng thái canvas hiện tại lên ngăn xếp đó, trong khi phương thức

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

86 sẽ bật trạng thái mới nhất từ ngăn xếp

Khu vực cắt

Vùng cắt là một vùng cụ thể trong đó tất cả các bản vẽ sẽ được thực hiện. Rõ ràng, theo mặc định, vùng cắt là hình chữ nhật là toàn bộ canvas. Nhưng bạn có thể muốn vẽ trong một khu vực cụ thể thay vì toàn bộ. Ví dụ: bạn có thể muốn vẽ nửa dưới của một ngôi sao được hình thành bằng nhiều phương pháp

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Vì vậy, ví dụ: giả sử bạn biết cách vẽ một ngôi sao trên canvas. Nó chạm vào tất cả các mặt của canvas. Nhưng bây giờ bạn chỉ muốn hiển thị nửa dưới của ngôi sao. Trong kịch bản này, bạn sẽ

Lưu trạng thái của canvas
Cắt vùng nửa dưới
Vẽ ngôi sao của bạn [như thể trên toàn bộ canvas]
Khôi phục trạng thái canvas

Để cắt một vùng, bạn phải gọi phương thức

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

93 thực hiện như sau

Phương pháp
// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}
93 phải tạo một vùng cắt mới bằng cách tính giao điểm của vùng cắt hiện tại và vùng được mô tả bởi đường dẫn, sử dụng quy tắc số quanh co khác không. Các đường phụ mở phải được đóng hoàn toàn khi tính toán vùng cắt mà không ảnh hưởng đến các đường phụ thực tế. Vùng cắt mới thay thế vùng cắt hiện tại.

Khi ngữ cảnh được khởi tạo, vùng cắt phải được đặt thành hình chữ nhật có góc trên cùng bên trái là [0,0] và chiều rộng và chiều cao của không gian tọa độ.

— Tài liệu W3C dành cho bối cảnh Canvas 2D

// canvas-demo.js

const demoCanvas = document.getElementById[’canvas-demo’].getContext[’2d’];

window.onload = function[] {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Đó là tất cả cho bây giờ. Mình sẽ viết một bài về animation với canvas và cách viết giao diện custom hoàn toàn trên canvas

đọc thêm

Cách sử dụng Firebase để xây dựng trò chơi nhiều người chơi trên Android
Cách đồng bộ hóa ứng dụng trò chơi của bạn trên nhiều thiết bị Android
Phụ thuộc vòng tròn trong JavaScript

Shukant Pal là người tạo ra hạt nhân Silcos. Anh ấy là một người ham học hỏi và hiện đang thực hành phát triển ứng dụng web nâng cao. Anh ấy có kinh nghiệm thực tế với React và hệ sinh thái của nó

Tất cả các trích dẫn được lấy từ tài liệu W3C cho Canvas 2D Context

Này, tôi là Shukant Pal. Tôi đang phát triển rất nhiều ứng dụng web trong thời gian rảnh rỗi. Theo dõi tôi trên mạng xã hội

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu

Bạn có thể đặt HTML trong canvas không?

HTML là Ngôn ngữ đánh dấu siêu văn bản và là nền tảng của tất cả các trang web. Nó giúp máy tính của chúng tôi giải thích nội dung trên trang web. hình ảnh, bảng, đoạn văn, tiêu đề, v.v. Khi chúng tôi tạo nội dung trong Canvas bằng Trình chỉnh sửa nội dung phong phú [RCE], thì Canvas sẽ chuyển đổi nội dung của chúng tôi thành mã [HTML] .

Canvas HTML5 có còn được sử dụng không?

Canvas HTML5 có tiềm năng trở thành một phần chính của web, được hỗ trợ nền tảng và trình duyệt phổ biến bên cạnh hỗ trợ trang web rộng rãi, vì gần 90% trang web đã chuyển sang HTML5

Canvas là HTML hay CSS?

Canvas là một vùng hình chữ nhật trên trang HTML . Theo mặc định, canvas không có viền và không có nội dung.

Bối cảnh kết xuất

Hỗ trợ trình duyệt

Bạn có thể đặt HTML trong canvas không?

Canvas HTML5 có còn được sử dụng không?

Canvas là HTML hay CSS?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề