GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 05/08/2019 | 00:00 GMT+7

Vẽ hình với API Canvas JavaScript

Trong bài viết này, ta sẽ xem xét phần tử canvas HTML và API canvas JavaScript để hiển thị các hình dạng phức tạp trên các trang web của ta .

Cài đặt

Tất cả những gì ta cần bắt đầu là một trang HTML có thẻ canvas và file JavaScript để thao tác với nó.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>HTML Canvas</title>
  </head>
  <body>

    <canvas></canvas>

  </body>
  <script src="./canvas.js"></script>
</html>

Với phần tử canvas của ta tại chỗ, bây giờ ta cần tạo một biến mới với nó và bối cảnh canvas, bổ sung một loạt chức năng vào canvas của ta . Để giữ cho mọi thứ đơn giản, ta sẽ gắn bó với các hình dạng 2D, nhưng với bối cảnh webgl , 3D cũng có thể.

Đối với ví dụ của ta , ta cần canvas của ta ở chế độ toàn màn hình nhưng việc đặt kích thước bằng cách sử dụng CSS sẽ tạo ra hiệu ứng mờ kỳ lạ, điều mà ta rõ ràng không muốn, vì vậy ta sẽ phải đặt nó ở đây.

canvas.js
// getting a reference to our HTML element
const canvas = document.querySelector('canvas')

// initiating 2D context on it
const c = canvas.getContext('2d')

addEventListener('resize', () => {
  canvas.width = innerWidth
  canvas.height = innerHeight
})

Hình chữ nhật

Để vẽ hình chữ nhật, trên biến ngữ cảnh ( c ), ta có thể bắt đầu thêm những gì ta muốn, được đo bằng pixel:

  • rect(x-axis, y-axis, width, height) : Đặt vị trí và kích thước của hình chữ nhật và cần được gọi trước stroke hoặc fill .
  • stroke : Hiển thị phác thảo của mọi thứ trước nó.
  • fill : Hiển thị toàn bộ hình dạng như một màu đồng nhất.
  • strokeStyle and fillStyle : Đặt màu đường viền và hình dạng. Chúng không phải là các hàm giống như các hàm khác và cần được gán một chuỗi.
  • strokeRect và fillRect : Tương tự như stroke và fill nhưng chỉ cho mục đó, hoạt động giống như trực rect .
  • clearRect(x-axis, y-axis, width, height) : Xóa mọi thứ bên trong một khu vực nhất định. Rất hữu ích khi ta tham gia vào các hoạt ảnh nơi ta liên tục kết xuất các yếu tố mới và không muốn những yếu tố cũ dính lại.
canvas.js
c.strokeStyle = 'white'
c.fillStyle = 'blue'
c.rect(100, 20, 150, 100)
c.stroke()
c.fill()

c.fillStyle = 'red'
c.fillRect(400, 500, 300, 250)

// Uncomment to remove the first two blocks
// c.clearRect(0, 0, canvas.width, canvas.height)
c.fillStyle = 'green'
c.fillRect(1500, 500, 300, 250)

Dòng

  • beginPath : Bắt đầu một dòng mới
  • stroke : Hiển thị đường
  • moveTo(x-axis, y-axis) : Đặt điểm bắt đầu
  • lineTo(x-axis, y-axis) : Hiển thị một đường từ điểm cuối trước đó
  • lineWidth : Đặt độ dày của đường

Và đây là một vài ví dụ mà ta vẽ một số dòng:

// Just a basic line
c.beginPath()
c.moveTo(40, 250)
c.lineTo(200, 500)
c.strokeStyle = 'red'
c.stroke()

// Draw the letter M
c.beginPath()
c.moveTo(1500, 700)
c.lineTo(1600, 450)
c.lineTo(1700, 700)
c.lineTo(1800, 450)
c.lineTo(1900, 700)
c.strokeStyle = 'blue'
c.stroke()

// Let's now draw a house
c.lineWidth = 10
c.strokeStyle = 'red'
c.fillStyle = 'red'

// Walls 
c.strokeRect(800, 500, 300, 200)

// Door
c.fillRect(925, 600, 50, 100)

// Roof 
c.beginPath()
c.moveTo(700, 500)
c.lineTo(1200, 500)
c.lineTo(950, 300)
c.lineTo(700, 500)
c.stroke()

Vòng kết nối

Phương pháp duy nhất ta thực sự cần để vẽ vòng tròn là arc . Các góc được tính bằng radian chứ không phải độ nên đối với góc cuối của ta , ta có thể sử dụng Math.PI * 2 , vì góc đó bằng 360 độ và góc bắt đầu có thể để bằng 0. Ta sẽ không cần chỉ định một giá trị cho counterclockwise , vì vậy ta có thể bỏ nó đi vì nó mặc định là false.

  • arc(x, y, radius, starting-angle, end-angle, counterclockwise (boolean))
canvas.js
c.lineWidth = 5
c.beginPath()
c.arc(400, 400, 50, 0, Math.PI * 2)
c.stroke()

Đường cong bậc hai và Bezier

Nếu bạn đã từng sử dụng các công cụ thiết kế đồ họa như Photoshop hoặc Affinity Designer, chúng sẽ có vẻ rất giống với một số công cụ dòng của họ.

Về cơ bản, đường cong bậc hai và đường cong bezier chỉ là các đường dạng tự do với các phương pháp điều khiển khác nhau. Các đường cong bậc hai đơn giản hơn ở chỗ chúng chỉ có điểm đầu, điểm cuối và điểm được gọi là điểm điều khiển, hoạt động như một chốt điều khiển để làm cong đường. Bạn có thể xem một ví dụ tương tác tuyệt vời ở đây . Mặt khác, các đường cong Bezier có hai điểm điều khiển, ở mỗi đầu của đường cong cho các hình dạng phức tạp hơn. Một ví dụ tuyệt vời khác ở đây .

  • quadraticCurveTo(controlPoint-x, controlPoint-y, endpoint-x, endpoint-y)
  • bezierCurveTo(startControlPoint-x, startControlPoint-y, endControlPoint-x, endControlPoint-y, endpoint-x, endpoint-y)

Và một số ví dụ:

canvas.js
c.lineWidth = 5
c.strokeStyle = 'white'

c.beginPath()
c.moveTo(400, 400)
c.lineTo(400, 300)
c.quadraticCurveTo(450, 250, 500, 300)
c.lineTo(500, 400)
c.stroke()

c.beginPath()
c.moveTo(800, 400);
c.bezierCurveTo(800, 150, 1200, 700, 1200, 400);
c.stroke()

Bản văn

Văn bản hoạt động rất giống với hình chữ nhật với một số tùy chọn giống như CSS để tạo kiểu:

  • fillText(text, x, y)
  • strokeText(text, x, y)
  • font: Lấy một chuỗi có kích thước tính bằng pixel và họ phông chữ; như ' 60px Times-New-Roman '.
  • textAlign : Lấy một chuỗi có các tùy chọn giống như đối tác CSS của nó; start , end , left , right và center .
canvas.js
c.font = '60px Times-New-Roman'
c.fillText("Hello World", 600, 500)
c.strokeText('Hello World', 1200, 500)

Kết luận

Mặc dù vẫn còn một số lượng lớn có thể được thực hiện với canvas HTML như hoạt ảnh và tương tác, hy vọng đây là phần giới thiệu đầu tiên tốt về một số khả năng của nó.

Tags:

Các tin liên quan

clientWidth và clientHeight trong JavaScript
2019-07-24
Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
2019-07-05
Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript
2019-06-18
Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05
Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09