Bạn có thể vẽ hình trong HTML không?

Trình duyệt cung cấp cho chúng tôi một số cách để hiển thị đồ họa. Cách đơn giản nhất là sử dụng các kiểu để định vị và tô màu các phần tử DOM thông thường. Điều này có thể đưa bạn đi khá xa, như trò chơi trong chương trước đã chỉ ra. Bằng cách thêm các hình nền trong suốt một phần vào các nút, chúng ta có thể làm cho chúng trông chính xác theo cách chúng ta muốn. Thậm chí có thể xoay hoặc nghiêng các nút với kiểu

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Nhưng chúng tôi sẽ sử dụng DOM cho thứ mà ban đầu nó không được thiết kế cho. Một số tác vụ, chẳng hạn như vẽ một đường thẳng giữa các điểm tùy ý, cực kỳ khó thực hiện với các phần tử HTML thông thường

Có hai lựa chọn thay thế. Cái đầu tiên dựa trên DOM nhưng sử dụng Đồ họa vectơ có thể mở rộng (SVG), thay vì HTML. Hãy nghĩ về SVG như một phương ngữ đánh dấu tài liệu tập trung vào hình dạng hơn là văn bản. Bạn có thể nhúng tài liệu SVG trực tiếp vào tài liệu HTML hoặc bao gồm tài liệu đó bằng thẻ

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Phương án thứ hai được gọi là canvas. Canvas là một phần tử DOM duy nhất gói gọn một bức tranh. Nó cung cấp một giao diện lập trình để vẽ các hình dạng lên không gian được chiếm bởi nút. Sự khác biệt chính giữa canvas và ảnh SVG là trong SVG, mô tả ban đầu của các hình dạng được giữ nguyên để chúng có thể được di chuyển hoặc thay đổi kích thước bất kỳ lúc nào. Mặt khác, canvas chuyển đổi hình dạng thành pixel (các chấm màu trên raster) ngay khi chúng được vẽ và không nhớ những pixel này đại diện cho cái gì. Cách duy nhất để di chuyển một hình dạng trên khung vẽ là xóa khung vẽ (hoặc một phần của khung vẽ xung quanh hình dạng đó) và vẽ lại nó bằng hình dạng ở vị trí mới

SVG

Cuốn sách này sẽ không đi sâu vào SVG, nhưng tôi sẽ giải thích ngắn gọn về cách thức hoạt động của nó. Ở cuối chương này, tôi sẽ quay lại với những đánh đổi mà bạn phải cân nhắc khi quyết định cơ chế vẽ nào phù hợp với một ứng dụng nhất định

Đây là một tài liệu HTML với một hình ảnh SVG đơn giản trong đó

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Các thẻ này tạo các phần tử DOM, giống như các thẻ HTML, mà tập lệnh có thể tương tác với. Ví dụ: điều này thay đổi phần tử

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

phần tử canvas

Đồ họa canvas có thể được vẽ trên phần tử

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Một khung vẽ mới trống, có nghĩa là nó hoàn toàn trong suốt và do đó hiển thị dưới dạng khoảng trống trong tài liệu

Thẻ

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Cuốn sách này sẽ không thảo luận về WebGL—chúng ta sẽ tập trung vào hai chiều. Nhưng nếu bạn quan tâm đến đồ họa ba chiều, tôi khuyến khích bạn xem xét WebGL. Nó cung cấp giao diện trực tiếp cho phần cứng đồ họa và cho phép bạn hiển thị hiệu quả ngay cả những cảnh phức tạp, sử dụng JavaScript

Bạn tạo ngữ cảnh bằng phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Sau khi tạo đối tượng bối cảnh, ví dụ vẽ một hình chữ nhật màu đỏ rộng 100 pixel và cao 50 pixel, với góc trên cùng bên trái của nó tại tọa độ (10,10)

Giống như trong HTML (và SVG), hệ tọa độ mà canvas sử dụng đặt (0,0) ở góc trên cùng bên trái và trục y dương đi xuống từ đó. Vì vậy (10,10) là 10 pixel bên dưới và ở bên phải của góc trên cùng bên trái

Đường nét và bề mặt

Trong giao diện canvas, hình dạng có thể được lấp đầy, nghĩa là khu vực của nó được cung cấp một màu hoặc mẫu nhất định hoặc nó có thể được vuốt, nghĩa là một đường được vẽ dọc theo cạnh của nó. Thuật ngữ tương tự được sử dụng bởi SVG

Phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Cả hai phương thức đều không nhận thêm bất kỳ tham số nào. Màu tô, độ dày của nét, v.v., không được xác định bởi một đối số của phương thức (như bạn có thể mong đợi một cách hợp lý) mà thay vào đó là bởi các thuộc tính của đối tượng bối cảnh

Thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Khi không chỉ định thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

đường dẫn

Đường dẫn là một dãy các đường. Giao diện canvas 2D có một cách tiếp cận đặc biệt để mô tả một đường dẫn như vậy. Nó được thực hiện hoàn toàn thông qua các tác dụng phụ. Đường dẫn không phải là giá trị có thể được lưu trữ và chuyển qua. Thay vào đó, nếu bạn muốn làm gì đó với một đường dẫn, bạn thực hiện một chuỗi các lệnh gọi phương thức để mô tả hình dạng của nó

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Ví dụ này tạo một đường dẫn với một số đoạn đường ngang và sau đó vuốt nó bằng phương pháp

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Khi điền vào một đường dẫn (sử dụng phương pháp

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Ví dụ này vẽ một hình tam giác đầy. Lưu ý rằng chỉ có hai cạnh của tam giác được vẽ rõ ràng. Thứ ba, từ góc dưới cùng bên phải trở lại trên cùng, được ngụ ý và sẽ không ở đó khi bạn vuốt đường dẫn

Bạn cũng có thể sử dụng phương thức

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

đường cong

Một đường dẫn cũng có thể chứa các đường cong. Thật không may, đây là một chút tham gia nhiều hơn để vẽ

Phương pháp

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng tôi vẽ một đường cong bậc hai từ trái sang phải, với (60,10) là điểm kiểm soát, sau đó vẽ hai đoạn thẳng đi qua điểm kiểm soát đó và quay lại điểm bắt đầu của đường. Kết quả hơi giống phù hiệu Star Trek. Bạn có thể thấy tác dụng của điểm kiểm soát. các đường rời khỏi các góc dưới bắt đầu theo hướng của điểm kiểm soát và sau đó cong về phía mục tiêu của chúng

Phương pháp

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hai điểm kiểm soát xác định hướng ở cả hai đầu của đường cong. Chúng càng ở xa điểm tương ứng, đường cong sẽ càng “phình ra” theo hướng đó

Những đường cong như vậy có thể khó làm việc với—không phải lúc nào cũng rõ ràng cách tìm các điểm kiểm soát cung cấp hình dạng mà bạn đang tìm kiếm. Đôi khi bạn có thể tính toán chúng và đôi khi bạn sẽ phải tìm một giá trị phù hợp bằng cách thử và sai

Phương pháp

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hai tham số cuối cùng đó chỉ có thể vẽ một phần của vòng tròn. Các góc được đo bằng radian, không phải độ. Điều này có nghĩa là một vòng tròn đầy đủ có một góc là 2π hoặc

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hình ảnh kết quả chứa một đường kẻ từ bên phải của vòng tròn đầy đủ (lần gọi đầu tiên đến

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Vẽ biểu đồ hình tròn

Hãy tưởng tượng bạn vừa nhận một công việc tại EconomCorp, Inc. và nhiệm vụ đầu tiên của bạn là vẽ biểu đồ hình tròn về kết quả khảo sát mức độ hài lòng của khách hàng

Liên kết

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Để vẽ một biểu đồ hình tròn, chúng ta vẽ một số lát cắt hình tròn, mỗi lát cắt được tạo thành từ một cung và một cặp đường kẻ đến tâm của cung đó. Chúng ta có thể tính góc của mỗi cung bằng cách chia một vòng tròn đầy đủ (2π) cho tổng số câu trả lời rồi nhân số đó (góc trên mỗi câu trả lời) với số người đã chọn một lựa chọn nhất định.

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Nhưng một biểu đồ không cho chúng ta biết ý nghĩa của các lát cắt không hữu ích lắm. Chúng tôi cần một cách để vẽ văn bản vào canvas

Chữ

Bối cảnh vẽ canvas 2D cung cấp các phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Bạn có thể chỉ định kích thước, kiểu và phông chữ của văn bản bằng thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hai đối số cuối cùng của

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng ta sẽ quay lại biểu đồ hình tròn và vấn đề đặt tên cho các lát cắt trong các bài tập ở cuối chương.

Hình ảnh

Trong đồ họa máy tính, người ta thường phân biệt giữa đồ họa vector và đồ họa bitmap. Đầu tiên là những gì chúng ta đã làm cho đến giờ trong chương này—xác định một bức tranh bằng cách đưa ra một mô tả hợp lý về các hình dạng. Mặt khác, đồ họa bitmap không chỉ định hình dạng thực tế mà hoạt động với dữ liệu pixel (các chấm màu)

Phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Theo mặc định,

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Khi

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Điều này có thể được sử dụng để đóng gói nhiều họa tiết (phần tử hình ảnh) vào một tệp hình ảnh duy nhất và sau đó chỉ vẽ phần bạn cần. Ví dụ, chúng ta có bức ảnh này chứa một nhân vật game trong nhiều tư thế

Bằng cách xen kẽ tư thế mà chúng ta vẽ, chúng ta có thể hiển thị hoạt ảnh trông giống như một nhân vật đang đi bộ

Để tạo hoạt ảnh trên canvas, phương pháp

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng tôi biết rằng mỗi sprite, mỗi bức ảnh con, rộng 24 pixel và cao 30 pixel. Đoạn mã sau tải hình ảnh và sau đó thiết lập một khoảng thời gian (bộ đếm thời gian lặp lại) để vẽ khung tiếp theo

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Liên kết

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

chuyển đổi

Nhưng nếu chúng ta muốn nhân vật của mình đi bên trái thay vì bên phải thì sao? . Nhưng chúng ta cũng có thể hướng dẫn canvas vẽ bức tranh theo cách khác

Gọi phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Chia tỷ lệ sẽ khiến mọi thứ về hình ảnh được vẽ, bao gồm cả độ rộng của đường kẻ, được kéo dài ra hoặc ép lại với nhau như đã chỉ định. Chia tỷ lệ theo số tiền âm sẽ lật hình ảnh xung quanh. Việc lật xảy ra xung quanh điểm (0,0), có nghĩa là nó cũng sẽ đảo hướng của hệ tọa độ. Khi tỷ lệ ngang -1 được áp dụng, một hình được vẽ ở vị trí x 100 sẽ kết thúc ở vị trí từng là -100

Vì vậy, để xoay ngược một bức tranh, chúng ta không thể chỉ cần thêm

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Có một số phương pháp khác ngoài

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Vì vậy, nếu chúng ta dịch 10 pixel ngang hai lần, mọi thứ sẽ được vẽ 20 pixel ở bên phải. Nếu đầu tiên chúng ta di chuyển tâm của hệ tọa độ đến (50,50) và sau đó xoay 20 độ (khoảng 0. 1π radian), phép quay đó sẽ xảy ra quanh điểm (50,50)

Nhưng nếu trước tiên chúng ta xoay 20 độ và sau đó dịch chuyển theo (50,50), thì quá trình dịch chuyển sẽ xảy ra trong hệ tọa độ đã quay và do đó tạo ra một hướng khác. Thứ tự áp dụng các phép biến đổi

Để lật một bức tranh quanh đường thẳng đứng tại một vị trí x cho trước, ta có thể làm như sau

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Chúng tôi di chuyển trục y đến nơi chúng tôi muốn gương của mình, áp dụng phản chiếu và cuối cùng di chuyển trục y trở lại vị trí thích hợp của nó trong vũ trụ được nhân đôi. Hình ảnh sau đây giải thích tại sao điều này hoạt động

Điều này cho thấy các hệ tọa độ trước và sau khi phản chiếu qua đường trung tâm. Các hình tam giác được đánh số để minh họa từng bước. Nếu chúng ta vẽ một hình tam giác ở vị trí x dương, theo mặc định, nó sẽ ở vị trí của tam giác 1. Một cuộc gọi đến

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Bây giờ chúng ta có thể vẽ một nhân vật được nhân đôi ở vị trí (100,0) bằng cách lật thế giới xung quanh tâm dọc của nhân vật

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Lưu trữ và xóa các biến đổi

Chuyển đổi dính xung quanh. Mọi thứ khác mà chúng ta vẽ sau khi vẽ nhân vật được nhân đôi đó cũng sẽ được nhân đôi. Điều đó có thể bất tiện

Có thể lưu chuyển đổi hiện tại, thực hiện một số thao tác vẽ và chuyển đổi, sau đó khôi phục lại chuyển đổi cũ. Đây thường là điều thích hợp để làm đối với một chức năng cần tạm thời chuyển đổi hệ tọa độ. Đầu tiên, chúng tôi lưu bất kỳ phép biến đổi nào mà mã được gọi là hàm đang sử dụng. Sau đó, hàm thực hiện công việc của nó, thêm nhiều phép biến đổi lên trên phép biến đổi hiện tại. Cuối cùng, chúng tôi trở lại quá trình chuyển đổi mà chúng tôi đã bắt đầu với

Các phương thức

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Hàm

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Hàm này vẽ một hình dạng giống cái cây bằng cách vẽ một đường, di chuyển tâm của hệ tọa độ đến cuối đường và gọi chính nó hai lần—đầu tiên xoay sang trái rồi xoay sang phải. Mỗi cuộc gọi làm giảm độ dài của nhánh được vẽ và đệ quy dừng khi độ dài giảm xuống dưới 8

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Nếu các cuộc gọi đến

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Trở lại cuộc chơi

Bây giờ chúng ta đã biết đủ về vẽ canvas để bắt đầu làm việc trên hệ thống hiển thị dựa trên canvas cho trò chơi từ chương trước. Màn hình mới sẽ không còn chỉ hiển thị các hộp màu. Thay vào đó, chúng tôi sẽ sử dụng

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng tôi định nghĩa một loại đối tượng hiển thị khác có tên là

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Đối tượng này giữ nhiều thông tin hơn một chút so với

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Phương pháp

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Trái ngược với

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Phương pháp

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Các cuộc gọi đến

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Khi xóa màn hình, chúng tôi sẽ sử dụng màu hơi khác tùy thuộc vào trò chơi thắng (sáng hơn) hay thua (tối hơn)

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Để vẽ nền, chúng ta chạy qua các ô có thể nhìn thấy trong chế độ xem hiện tại, sử dụng thủ thuật tương tự được sử dụng trong phương pháp

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Các ô không trống được vẽ bằng

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Các ô nền có kích thước 20 x 20 pixel vì chúng tôi sẽ sử dụng cùng tỷ lệ mà chúng tôi đã sử dụng trong

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng tôi không bận tâm chờ tải hình ảnh sprite. Gọi

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Nhân vật đi bộ được hiển thị trước đó sẽ được sử dụng để đại diện cho người chơi. Mã vẽ nó cần chọn đúng sprite và hướng dựa trên chuyển động hiện tại của người chơi. Tám họa tiết đầu tiên chứa hoạt ảnh đi bộ. Khi người chơi di chuyển dọc theo một tầng, chúng tôi sẽ lướt qua chúng dựa trên thời gian hiện tại. Chúng tôi muốn chuyển đổi khung hình cứ sau 60 mili giây, vì vậy trước tiên thời gian được chia cho 60. Khi người chơi đứng yên, chúng tôi vẽ hình ảnh thứ chín. Trong các lần nhảy, được nhận ra bởi thực tế là tốc độ thẳng đứng không bằng 0, chúng tôi sử dụng sprite thứ mười, ngoài cùng bên phải

Bởi vì các họa tiết rộng hơn một chút so với đối tượng người chơi—24 thay vì 16 pixel để có một số khoảng trống cho bàn chân và cánh tay—phương pháp này phải điều chỉnh tọa độ x và chiều rộng theo một lượng nhất định (

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Phương thức

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Khi vẽ một cái gì đó không phải là trình phát, chúng tôi nhìn vào loại của nó để tìm phần bù của sprite chính xác. Gạch dung nham được tìm thấy ở offset 20 và hình đồng xu được tìm thấy ở 40 (hai lần

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng ta phải trừ vị trí của khung nhìn khi tính toán vị trí của diễn viên vì (0,0) trên khung vẽ của chúng ta tương ứng với phía trên bên trái của khung nhìn, không phải phía trên bên trái của mức. Chúng tôi cũng có thể đã sử dụng

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Tài liệu này cắm màn hình mới vào

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Lựa chọn giao diện đồ họa

Vì vậy, khi bạn cần tạo đồ họa trong trình duyệt, bạn có thể chọn giữa HTML, SVG và canvas thuần túy. Không có cách tiếp cận tốt nhất duy nhất hoạt động trong mọi tình huống. Mỗi lựa chọn đều có điểm mạnh và điểm yếu

HTML đơn giản có ưu điểm là đơn giản. Nó cũng tích hợp tốt với văn bản. Cả SVG và canvas đều cho phép bạn vẽ văn bản, nhưng chúng sẽ không giúp bạn định vị hoặc ngắt dòng văn bản đó khi văn bản đó chiếm nhiều hơn một dòng. Trong một hình ảnh dựa trên HTML, việc bao gồm các khối văn bản sẽ dễ dàng hơn nhiều

SVG có thể được sử dụng để tạo ra đồ họa sắc nét trông đẹp mắt ở mọi mức thu phóng. Không giống như HTML, nó được thiết kế để vẽ và do đó phù hợp hơn cho mục đích đó

Cả SVG và HTML đều xây dựng cấu trúc dữ liệu (DOM) đại diện cho ảnh của bạn. Điều này cho phép sửa đổi các phần tử sau khi chúng được vẽ. Nếu bạn cần thay đổi liên tục một phần nhỏ của bức tranh lớn để đáp ứng với những gì người dùng đang làm hoặc như một phần của hoạt ảnh, thì thực hiện việc đó trong canvas có thể tốn kém không cần thiết. DOM cũng cho phép chúng tôi đăng ký trình xử lý sự kiện chuột trên mọi thành phần trong ảnh (ngay cả trên các hình được vẽ bằng SVG). Bạn không thể làm điều đó với canvas

Nhưng cách tiếp cận theo hướng pixel của canvas có thể là một lợi thế khi vẽ một số lượng lớn các phần tử nhỏ. Thực tế là nó không xây dựng cấu trúc dữ liệu mà chỉ vẽ lặp đi lặp lại trên cùng một bề mặt pixel giúp canvas có chi phí cho mỗi hình dạng thấp hơn

Ngoài ra còn có các hiệu ứng, chẳng hạn như hiển thị từng pixel một cảnh (ví dụ: sử dụng công cụ dò tia) hoặc xử lý hậu kỳ hình ảnh bằng JavaScript (làm mờ hoặc bóp méo hình ảnh), chỉ có thể được xử lý thực tế bằng cách tiếp cận dựa trên pixel

Trong một số trường hợp, bạn có thể muốn kết hợp một số kỹ thuật này. Ví dụ: bạn có thể vẽ biểu đồ bằng SVG hoặc canvas nhưng hiển thị thông tin văn bản bằng cách định vị phần tử HTML ở trên cùng của hình ảnh

Đối với các ứng dụng không yêu cầu cao, việc bạn chọn giao diện nào thực sự không quan trọng lắm. Màn hình mà chúng tôi xây dựng cho trò chơi của mình trong chương này có thể đã được triển khai bằng cách sử dụng bất kỳ công nghệ đồ họa nào trong số ba công nghệ đồ họa này vì nó không cần vẽ văn bản, xử lý tương tác chuột hoặc làm việc với một số lượng lớn các thành phần

Tóm lược

Trong chương này, chúng ta đã thảo luận về các kỹ thuật vẽ đồ họa trong trình duyệt, tập trung vào phần tử

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Nút canvas đại diện cho một khu vực trong tài liệu mà chương trình của chúng tôi có thể vẽ trên đó. Bản vẽ này được thực hiện thông qua một đối tượng ngữ cảnh vẽ, được tạo bằng phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Giao diện vẽ 2D cho phép chúng ta tô và kẻ các hình dạng khác nhau. Thuộc tính

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hình chữ nhật và các đoạn văn bản có thể được vẽ bằng một lệnh gọi phương thức duy nhất. Các phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Gọi

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Việc di chuyển pixel từ một hình ảnh hoặc canvas khác lên canvas của chúng tôi được thực hiện bằng phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Các phép biến đổi cho phép bạn vẽ một hình dạng theo nhiều hướng. Bối cảnh bản vẽ 2D có một phép biến đổi hiện tại có thể được thay đổi bằng các phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Khi hiển thị hoạt ảnh trên khung vẽ, phương thức

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

bài tập

Hình dạng

Viết chương trình vẽ các hình sau trên canvas

1. Hình thang (hình chữ nhật có một cạnh rộng hơn)

2. Một viên kim cương màu đỏ (một hình chữ nhật xoay 45 độ hoặc ¼π radian)

3. Một đường ngoằn ngoèo

4. Một hình xoắn ốc được tạo thành từ 100 đoạn thẳng

5. một ngôi sao màu vàng

Khi vẽ hai cái cuối cùng, bạn có thể tham khảo phần giải thích về

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Tôi khuyên bạn nên tạo một chức năng cho từng hình dạng. Chuyển vị trí và các thuộc tính tùy chọn khác như kích thước hoặc số điểm, làm tham số. Giải pháp thay thế, đó là mã số cứng trên tất cả mã của bạn, có xu hướng làm cho mã khó đọc và sửa đổi một cách không cần thiết

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Hình thang (1) dễ vẽ nhất bằng đường dẫn. Chọn tọa độ trung tâm phù hợp và thêm từng góc trong bốn góc xung quanh trung tâm

Viên kim cương (2) có thể được vẽ theo cách đơn giản, với một đường dẫn hoặc cách thú vị, với phép biến đổi

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Đảm bảo rằng bạn đặt lại phép biến đổi sau khi vẽ bất kỳ hình dạng nào tạo ra một

Đối với đường ngoằn ngoèo (3), việc viết lệnh gọi mới tới

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Bạn cũng sẽ cần một vòng cho hình xoắn ốc (4). Nếu bạn vẽ một loạt các điểm, với mỗi điểm di chuyển xa hơn dọc theo một vòng tròn xung quanh tâm của hình xoắn ốc, bạn sẽ có một vòng tròn. Nếu trong vòng lặp, bạn thay đổi bán kính của vòng tròn mà bạn đang đặt điểm hiện tại và đi vòng quanh nhiều lần, thì kết quả là một hình xoắn ốc

Ngôi sao (5) được mô tả được xây dựng từ

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

<p>Normal HTML here.</p>
<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="red"/>
  <rect x="120" y="5" width="90" height="90"
        stroke="blue" fill="none"/>
</svg>

Biểu đồ hình tròn

Trước đó trong chương này, chúng ta đã xem một chương trình ví dụ vẽ biểu đồ hình tròn. Sửa đổi chương trình này để tên của mỗi danh mục được hiển thị bên cạnh lát đại diện cho nó. Cố gắng tìm một cách dễ nhìn để tự động định vị văn bản này cũng sẽ hoạt động cho các tập dữ liệu khác. Bạn có thể cho rằng các danh mục đủ lớn để có nhiều chỗ cho nhãn của chúng

Bạn có thể cần lại

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Bạn sẽ cần gọi

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Một cách hợp lý để định vị các nhãn là đặt văn bản trên đường đi từ tâm của chiếc bánh đến giữa lát. Bạn không muốn đặt văn bản trực tiếp vào mặt bên của chiếc bánh mà muốn di chuyển văn bản ra bên cạnh chiếc bánh theo một số pixel nhất định

Góc của đường này là

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Đối với

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Nếu bạn không chắc làm thế nào để tìm ra một góc cho trước nằm ở phía nào của đường tròn, hãy xem phần giải thích về

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Một quả bóng nảy

Sử dụng kỹ thuật

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Một hộp rất dễ vẽ với

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Để lập mô hình vị trí và tốc độ của quả bóng, bạn có thể sử dụng lớp

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Sau khi tìm thấy vị trí và tốc độ mới của quả bóng, hãy sử dụng

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Phản chiếu được tính toán trước

Một điều đáng tiếc về các phép biến đổi là chúng làm chậm quá trình vẽ ảnh bitmap. Vị trí và kích thước của mỗi pixel phải được chuyển đổi và mặc dù có thể các trình duyệt sẽ trở nên thông minh hơn trong việc chuyển đổi trong tương lai, nhưng chúng hiện đang gây ra sự gia tăng có thể đo lường được về thời gian cần thiết để vẽ một bitmap

Trong một trò chơi như trò chơi của chúng tôi, nơi chúng tôi chỉ vẽ một nhân vật được biến đổi duy nhất, đây không phải là vấn đề. Nhưng hãy tưởng tượng rằng chúng ta cần vẽ hàng trăm ký tự hoặc hàng nghìn hạt đang quay từ một vụ nổ

Hãy nghĩ ra một cách cho phép chúng tôi vẽ một ký tự đảo ngược mà không cần tải các tệp hình ảnh bổ sung và không phải thực hiện các cuộc gọi

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chìa khóa của giải pháp là chúng ta có thể sử dụng phần tử canvas làm hình ảnh nguồn khi sử dụng

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Cần phải cẩn thận vì hình ảnh không tải ngay lập tức. Chúng tôi chỉ thực hiện bản vẽ đảo ngược một lần và nếu chúng tôi thực hiện trước khi tải hình ảnh, nó sẽ không vẽ được gì. Trình xử lý

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.strokeStyle = "blue";
  cx.strokeRect(5, 5, 50, 50);
  cx.lineWidth = 5;
  cx.strokeRect(135, 5, 50, 50);
</script>

Chúng ta có thể vẽ hình trong HTML không?

Làm cách nào để vẽ hình chữ nhật trong HTML?

Làm cách nào để vẽ đồ họa trong HTML?

CSS có thể sử dụng hình dạng không?