Tìm hiểu cách sử dụng phương thức drawImage () để vẽ hình ảnh vào đối tượng canvas của bạn

Bạn đang xem: vẽ hình ảnh trong canvas

drawImage () Phương thức là một phương thức từ API Canvas cho phép bạn thêm hình ảnh vào phần tử & lt; canvas & gt; của mình.

Cũng giống như phương thức fillRect () , phương thức drawImage () là một phần của Canvas 2D API, vì vậy bạn cần lấy đối tượng Context của Trước tiên, phần tử & lt; canvas & gt; và gọi phương thức từ đó.

Ví dụ: giả sử bạn có & lt; canvas & gt; sau Phần tử & lt; img & gt; trong trang HTML của bạn:

  & lt; body & gt;
  & lt; canvas
    id = "myCanvas"
    width = "300"
    chiều cao = "300"
    style = "background-color: red"
  & gt; & lt; / canvas & gt;
  & lt; img
    id = "imgSource"
    src = "image.jpg"
    style = "display: none;"
  / & gt;
& lt; / body & gt;
 

style = "background-color: red" được thêm vào phần tử & lt; canvas & gt; để bạn có thể nhìn thấy cạnh của canvas. Ngoài ra, hãy chú ý cách phần tử & lt; img & gt; bị ẩn khỏi chế độ xem bằng cách sử dụng thuộc tính style = "display: none;" .

Hãy đặt hình ảnh bên trong canvas. Đầu tiên, lấy bối cảnh 2D của Canvas bằng phương thức getContext () như sau:

  let canvas = document.getElementById ("myCanvas");
let ctx = canvas.getContext ("2d");
 

Phương thức drawImage () yêu cầu ba tham số để hoạt động :

  • phần tử đối tượng image
  • Tọa độ x để đặt đối tượng vào canvas
  • Tọa độ y để đặt đối tượng trong canvas

Đây là ví dụ về việc thêm hình ảnh có id của imgSource vào canvas:

  let img = document.getElementById ("imgSource");
ctx.drawImage (img, 50, 50);
 

Đoạn mã trên sẽ thêm phần tử hình ảnh vào canvas. Đây là ví dụ về canvas của tôi sử dụng hình ảnh biểu trưng JavaScript với kích thước 200 X 200:

Xem Thêm  Kiểm tra IFrame: Hướng dẫn Cơ bản - cách kiểm tra iframe

Mặc dù phương thức drawImage () chỉ yêu cầu ba tham số để hoạt động, nhưng bạn thực sự có thể vượt qua có tổng cộng 9 tham số cho phương thức, tùy thuộc vào những gì bạn muốn thực hiện với đối tượng.

Để đặt một hình ảnh vào canvas, bạn cần chuyển ba tham số như bạn đã thấy trước đây: < phần tử code> image , tọa độ x và tọa độ y để vẽ hình ảnh.

  drawImage (image, x, y);
 

Tiếp theo, bạn cũng có thể điều chỉnh width height của hình ảnh bằng cách chuyển hai tham số tùy chọn (tổng cộng năm tham số) < / p>

  drawImage (hình ảnh, x, y, chiều rộng, chiều cao);
 

Cuối cùng, bạn cũng có thể cắt hình ảnh và thêm hình ảnh đã cắt vào canvas của mình bằng cách chuyển bốn tham số bổ sung:

  • sx sy phối hợp để bắt đầu cắt hình ảnh
  • Các thông số sWidth sHeight để xác định chiều rộng và chiều cao của clip
  ctx.drawImage (img, sx, sy, sWidth, sHeight, x, y, width, height) ;
 

Ví dụ: đây là đoạn mã để cắt biểu trưng JavaScript, trong đó chỉ có ký tự JS được hiển thị từ hình ảnh:

  ctx.drawImage (img, 50, 80, 140, 120, 50, 50, 140, 120);
 

Kết quả sẽ như sau:

Bạn có thể thắc mắc tại sao bạn vẫn cần chuyển width height của hình ảnh (hai tham số cuối cùng) để thêm vào canvas khi bạn đang sử dụng hình ảnh đã cắt.

Điều này là do bạn vẫn có thể thay đổi kích thước hình ảnh sau khi cắt. Nếu không chỉ định chiều rộng và chiều cao của hình ảnh, phương thức drawImage () sẽ tạo ra lỗi Overload Resolution failed .

Và đó là cách bạn có thể sử dụng phương thức drawImage () để thêm một hoặc nhiều hình ảnh vào phần tử & lt; canvas & gt; . Khi bạn vẽ nhiều hình ảnh vào canvas, đừng quên chỉ định các thông số x y khác nhau cho mỗi hình ảnh, nếu không hình ảnh tiếp theo của bạn sẽ xếp chồng lên hình ảnh trước đó hình ảnh.

Bài viết liên quan:


Xem thêm những thông tin liên quan đến chủ đề vẽ hình ảnh trong canvas

HƯỚNG DẪN TẠO VIỀN CHO HÌNH ẢNH ẤN TƯỢNG VỚI CANVA // NGUYỄN NGỌC DƯƠNG

  • Tác giả: Nguyễn Ngọc Dương
  • Ngày đăng: 2021-11-02
  • Đánh giá: 4 ⭐ ( 8774 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HƯỚNG DẪN TẠO VIỀN CHO HÌNH ẢNH ẤN TƯỢNG VỚI CANVA // NGUYỄN NGỌC DƯƠNG
    Làm thế nào để tạo đường viền màu trắng hoặc một màu bất kỳ cho hình ảnh thì trong video này mình sẽ hướng dẫn các bạn nhanh chóng để thực hiện đổ viền theo nhiều cách khác nhau

    🔥 HƯỚNG DẪN CÁCH DÙNG CANVA CHO NGƯỜI MỚI
    https://youtu.be/66dPMvX0Dy8

    🔥 Một số MẸO & THỦ THUẬT trong Canva
    https://youtu.be/AZ-eZuE0vDw

    🔥 Khóa học thiết kế Slide PowerPoint chuyên nghiệp tại đây:
    https://nguyenngocduong.vn/

    Tham gia Cộng đồng thiết kế Canva Việt Nam: https://bit.ly/3AC7fEa
    Tham gia Cộng đồng Slide PowerPoint Việt Nam: https://bit.ly/2SgWNkY

    Kênh kiến thức về Slide PowerPoint chuyên nghiệp:
    Nguyễn Ngọc Dương Official: https://bit.ly/3gIaUId

    🔥Đừng quên Like và Share nếu thấy video hữu ích trong cuộc sống của bạn!
    🔥Đăng ký kênh để theo dõi các video mới nhất nhé!

    canva
    nguyenngocduong
    canva_tutorial

NVIDIA Canvas: Biến Nét vẽ Đơn giản thành Hình ảnh Thực tế

  • Tác giả: www.nvidia.com
  • Đánh giá: 5 ⭐ ( 3407 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo hình nền một cách nhanh chóng hoặc tăng tốc độ khám phá chủ đề của bạn để bạn có thể dành nhiều thời gian hơn trong việc hình dung ý tưởng với sự trợ giúp của NVIDIA Canvas.

HTML5 Canvas - vẽ những hình ảnh đồ họa linh động

  • Tác giả: expressmagazine.net
  • Đánh giá: 4 ⭐ ( 6524 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ được sử dụng để vẽ những hình ảnh đồ họa linh động trên trang web thông qua các ngôn ngữ script (thông thường là Javascript).

Vẽ hình ảnh từ URL dữ liệu vào canvas

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3437 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Với URL dữ liệu, bạn có thể tạo hình ảnh (trên trang hoặc hoàn toàn bằng…

HTML5: Vẽ ảnh trên

  • Tác giả: www.v1study.com
  • Đánh giá: 5 ⭐ ( 3635 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để vẽ ảnh trên canvas bạn sử dụng phương thức sau: drawImage(image,x,y)

Ghép khung vào hình với Canvas trong HTML5

  • Tác giả: luuthevinh.me
  • Đánh giá: 5 ⭐ ( 4630 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn, Trong bài này mình sẽ hướng dẫn các bạn cách ghép hình bằng Canvas trong HTML5, cụ thể ở đây mình ghép khung vào hình mà mình chọn từ máy lên. Các bạn có thể xem demo ở đây.

Công cụ vẽ tranh nghệ thuật bằng AI

  • Tác giả: www.thegioididong.com
  • Đánh giá: 4 ⭐ ( 2001 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là một trong những phần mềm hỗ trợ đắc lực giúp bạn tạo nên những khung ảnh chân thực nhất bằng những thao tác đơn giản, ứng dụng được xử lý bằng AI với đa dạng các tùy chọn, giúp bạn thoải mái sáng tạo.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php