Tham chiếu Canvas HTML
Phần tử <canvas> xác định vùng được ánh xạ bit trong trang HTML.
API Canvas cho phép JavaScript vẽ đồ họa trên canvas.
API Canvas có thể vẽ các hình dạng, đường thẳng, đường cong, hộp, văn bản và hình ảnh bằng màu sắc, góc xoay, độ trong suốt và các thao tác pixel khác.
Bạn có thể thêm phần tử canvas ở bất kỳ đâu trong trang HTML bằng thẻ <canvas> :
Bạn có thể truy cập phần tử <canvas> bằng phương thức HTML DOM getElementById() .
Để vẽ trong khung vẽ, bạn cần tạo đối tượng bối cảnh 2D :
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
Ghi chú
Bản thân phần tử HTML <canvas> không có khả năng vẽ.
Bạn phải sử dụng JavaScript để vẽ bất kỳ đồ họa nào.
Phương thức getContext() trả về một đối tượng có các công cụ (phương thức) để vẽ.
Vẽ trên Canvas
Sau khi tạo bối cảnh 2D, bạn có thể vẽ trên khung vẽ.
Phương thức fillRect() vẽ một hình chữ nhật màu đen với góc trên cùng bên trái ở vị trí 20,20. Hình chữ nhật có chiều rộng 150 pixel và chiều cao 100 pixel.
Ví dụ
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử »Sử dụng màu sắc
Thuộc tính fillStyle đặt màu tô cho đối tượng vẽ:
Ví dụ
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử » Bạn cũng có thể tạo phần tử <canvas> mới bằng phương thức document.createElement() và thêm phần tử đó vào trang HTML hiện có:
Ví dụ
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử »Đường dẫn
Cách phổ biến để vẽ trên canvas là:
- Bắt đầu một con đường - BeginPath()
- Di chuyển đến một điểm - moveTo()
- Vẽ trong đường dẫn - lineTo()
- Vẽ đường dẫn - nét()
Ví dụ
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
Hãy tự mình thử »Tài liệu tham khảo API Canvas hoàn chỉnh
Tham chiếu này bao gồm tất cả Thuộc tính và Phương thức của Đối tượng getContext("2d"), được sử dụng để vẽ văn bản, đường thẳng, hộp, vòng tròn, hình ảnh, v.v. trên khung vẽ.
Phương pháp vẽ
Chỉ có 3 phương pháp để vẽ trực tiếp trên canvas:
| Method | Description |
|---|---|
| fillRect() | Draws a "filled" rectangle |
| strokeRect() | Draws a rectangle (with no fill) |
| clearRect() | Clears specified pixels within a rectangle |
Phương thức đường dẫn
| Method | Description |
|---|---|
| beginPath() | Begins a new path or resets the current path |
| closePath() | Adds a line to the path from the current point to the start |
| isPointInPath() | Returns true if the specified point is in the current path |
| moveTo() | Moves the path to a point in the canvas (without drawing) |
| lineTo() | Adds a line to the the path |
| fill() | Fills the current path |
| rect() | Adds a rectangle to the path |
| stroke() | Draws the current path |
| Circles and Curves | |
| bezierCurveTo() | Adds a cubic Bézier curve to the path |
| arc() | Adds an arc/curve (circle, or parts of a circle) to the path |
| arcTo() | Adds an arc/curve between two tangents to the path |
| quadraticCurveTo() | Adds a quadratic Bézier curve to the path |
Chữ
| Method/Prop | Description |
|---|---|
| direction | Sets or returns the direction used to draw text |
| fillText() | Draws "filled" text on the canvas |
| font | Sets or returns the font properties for text content |
| measureText() | Returns an object that contains the width of the specified text |
| strokeText() | Draws text on the canvas |
| textAlign | Sets or returns the alignment for text content |
| textBaseline | Sets or returns the text baseline used when drawing text |
Màu sắc, kiểu dáng và bóng
| Method/Property | Description |
|---|---|
| addColorStop() | Specifies the colors and stop positions in a gradient object |
| createLinearGradient() | Creates a linear gradient (to use on canvas content) |
| createPattern() | Repeats a specified element in the specified direction |
| createRadialGradient() | Creates a radial/circular gradient (to use on canvas content) |
| fillStyle | Sets or returns the color, gradient, or pattern used to fill the drawing |
| lineCap | Sets or returns the style of the end caps for a line |
| lineJoin | Sets or returns the type of corner created, when two lines meet |
| lineWidth | Sets or returns the current line width |
| miterLimit | Sets or returns the maximum miter length |
| shadowBlur | Sets or returns the blur level for shadows |
| shadowColor | Sets or returns the color to use for shadows |
| shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape |
| shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape |
| strokeStyle | Sets or returns the color, gradient, or pattern used for strokes |
chuyển đổi
| Method | Description |
|---|---|
| scale() | Scales the current drawing bigger or smaller |
| rotate() | Rotates the current drawing |
| translate() | Remaps the (0,0) position on the canvas |
| transform() | Replaces the current transformation matrix for the drawing |
| setTransform() | Resets the current transform to the identity matrix. Then runs transform() |
Vẽ hình ảnh
| Method | Description |
|---|---|
| drawImage() | Draws an image, canvas, or video onto the canvas |
Đối tượng ImageData/Thao tác pixel
| Method/Property | Description |
|---|---|
| createImageData() | Creates a new, blank ImageData object |
| getImageData() | Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas |
| ImageData.data | Returns an object that contains image data of a specified ImageData object |
| ImageData.height | Returns the height of an ImageData object |
| ImageData.width | Returns the width of an ImageData object |
| putImageData() | Puts the image data (from a specified ImageData object) back onto the canvas |
Soạn
| Property | Description |
|---|---|
| globalAlpha | Sets or returns the current alpha or transparency value of the drawing |
| globalCompositeOperation | Sets or returns how a new image are drawn onto an existing image |
Các phương pháp khác
| Method | Description |
|---|---|
| clip() | Clips a region of any shape and size from the original canvas |
| save() | Saves the state of the current drawing context and all its atributes |
| restore() | Restores the previously saved state and attributes |
| createEvent() | |
| getContext() | |
| toDataURL() |
Thuộc tính và sự kiện tiêu chuẩn
Đối tượng canvas cũng hỗ trợ các thuộc tính và sự kiện tiêu chuẩn.
Trang liên quan
Hướng dẫn HTML: HTML5 Canvas
Tham chiếu HTML: thẻ HTML <canvas>
Hỗ trợ trình duyệt
Phần tử <canvas> là tiêu chuẩn HTML5 (2014).
Canvas API được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
