Bạn đang xem : vẽ văn bản trong canvas

Văn bản canvas HTML5

Cập nhật lần cuối vào ngày 28 tháng 5 năm 2022 06:49:19 (UTC / GMT +8 giờ)

Vẽ Văn bản

Trong HTML5, phần tử canvas hỗ trợ hiển thị văn bản cơ bản trên cơ sở từng dòng. Có hai phương thức fillText () và strokeText () để vẽ văn bản trên canvas. Bạn có thể sử dụng thuộc tính phông chữ (loại: chuỗi) để chỉ định một số cài đặt văn bản như kiểu, trọng lượng, kích thước và phông chữ. Kiểu có thể là bình thường, nghiêng hoặc đậm. Phong cách mặc định là bình thường.
Ví dụ mã của thuộc tính phông chữ:

  ctx  .font = 'italic 400 12px, sans-serif'; 

Trọng lượng phông chữ “400” không xuất hiện vì đó là giá trị mặc định.

Phương thức fillText ()

Phương thức fillText () được sử dụng để hiển thị văn bản đã điền vào canvas bằng cách sử dụng kiểu tô và phông chữ hiện tại.

Cú pháp:

Thông số
Loại hình
Sự mô tả

văn bản

sợi dây
Các ký tự văn bản để vẽ trên canvas.

x
con số
Tọa độ ngang để bắt đầu tô văn bản, so với khung vẽ.

y
con số
Tọa độ dọc để bắt đầu tô văn bản, so với khung vẽ.

chiều rộng tối đa
con số
Chiều rộng văn bản tối đa có thể.

Ví dụ: HTML5 Canvas vẽ văn bản bằng phương thức fillText ()

Tài liệu web sau đây vẽ văn bản bằng cách sử dụng phương thức fillText () và thuộc tính phông chữ.

Đầu ra:

html5 canvas text example1

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "600" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
 var ctx = canvas.getContext ('2d');
 ctx.font = 'italic 32px sans-serif';
 ctx.fillText ('Hướng dẫn HTML5 Canvas', 10, 50);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Phương thức strokeText ()

Phương thức strokeText () được sử dụng để hiển thị văn bản được chỉ định tại vị trí được chỉ định bằng cách sử dụng thuộc tính font, lineWidth và strokeStyle hiện tại.

Cú pháp:

Thông số
Loại hình
Sự mô tả

chữ
sợi dây
Các ký tự văn bản để vẽ trên canvas.

x
con số
Tọa độ ngang để bắt đầu tô văn bản, so với khung vẽ.

y
con số
Tọa độ dọc để bắt đầu tô văn bản, so với khung vẽ.

chiều rộng tối đa
con số
Chiều rộng văn bản tối đa có thể.

Ví dụ: HTML5 Canvas vẽ văn bản bằng phương thức strokeText ()

Tài liệu web sau đây vẽ văn bản bằng phương thức strokeText () và các thuộc tính phông chữ, lineWidth.

Xem Thêm  Nút hình ảnh HTML - hình ảnh dưới dạng nút html

Đầu ra:

html5 canvas text example2

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "600" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
 var ctx = canvas.getContext ('2d');
 ctx.font = "italic 36px Phông chữ Không xác định, sans-serif";
 ctx.strokeStyle = "red"; // đặt màu nét thành đỏ
 ctx.lineWidth = "1.5"; // đặt chiều rộng nét vẽ thành 1.5
  cho (var i = 40; i & lt; 200; i + = 40)
     {
     ctx.strokeText ("w3resource", i, i);
      }
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Ví dụ: Vẽ văn bản bằng phương thức fillText () và gradient tuyến tính

Tài liệu web sau đây vẽ văn bản được tô bằng gradient tuyến tính.

Đầu ra:

html5 canvas text example3

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "600" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext ('2d');
gradient = ctx.createLinearGradient (0, 0, canvas.width, 0);
// Thêm các màu có điểm dừng cố định ở 25% chiều rộng.
  
gradient.addColorStop ("0", "red");
gradient.addColorStop (". 25", "màu vàng");
gradient.addColorStop (". 50", "xanh lục");
gradient.addColorStop (". 75", "xanh lam");
gradient.addColorStop ("1.0", "đỏ tươi");

  // Sử dụng gradient.
ctx.font = "italic 700 25px Phông chữ Không xác định, sans-serif";
ctx.fillStyle = gradient;

  cho (var i = 0; i & lt; 400; i + = 50)
   {
      ctx.fillText ("W3resource", i, i);
   }
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Căn chỉnh Văn bản

Trong HTML5 canvas thuộc tính textAlign được sử dụng để đặt căn chỉnh văn bản trên canvas. Các giá trị có thể là bắt đầu, kết thúc, trái, phải và trung tâm. Giá trị mặc định: bắt đầu.

  • start:

    Văn bản được căn ở đầu dòng bình thường (căn trái cho các ngôn ngữ từ trái sang phải, căn phải cho các ngôn ngữ từ phải sang trái).

  • end: Văn bản được căn ở cuối dòng bình thường (căn phải cho các ngôn ngữ từ trái sang phải, căn trái cho các ngôn ngữ từ phải sang trái).
  • left: Văn bản được căn trái.

  • right

    : Văn bản được căn phải.

  • center: Văn bản được căn giữa.

Cú pháp:

  ctx  .textAlign = value 

Ví dụ: HTML5 Canvas, vẽ văn bản bằng cách sử dụng căn chỉnh văn bản

Ví dụ mã sau đây hiển thị tất cả các giá trị thuộc tính của thuộc tính textAlign.

Đầu ra:

ví dụ về căn chỉnh văn bản canvas html5

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "600" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext ('2d');
// Tạo một dòng tại điểm neo.
ctx.strokeStyle = "blue";
ctx.textAlign = "trung tâm";
ctx.moveTo (150, 60);
ctx.lineTo (150, 330);
ctx.stroke ();

ctx.strokeStyle = "xanh";
ctx.font = "20px sans-serif";
ctx.textAlign = "bắt đầu";
ctx.fillText ("Vị trí bắt đầu", 150, 100);
ctx.textAlign = "end";
ctx.fillText ("Vị trí kết thúc", 150, 150);
ctx.textAlign = "trái";
ctx.fillText ("Căn trái", 150, 200);
ctx.textAlign = "trung tâm";
ctx.fillText ("Căn giữa", 150, 250);
ctx.textAlign = "ngay";
ctx.fillText ("Căn phải", 150, 300);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đường cơ sở Văn bản

Trong HTML5 canvas, thuộc tính textBaseline được sử dụng để lấy hoặc đặt cài đặt hiện tại cho căn chỉnh đường cơ sở phông chữ. Giá trị pháp lý là trên cùng, treo, giữa, chữ cái, ký hiệu, dưới cùng.

  • top: Phần trên cùng của hình vuông.
  • treo: Đường cơ sở treo
  • middle:

    Chính giữa hình vuông.

  • alphabetic

    : Mặc định. Đường cơ sở bảng chữ cái.

  • Ideographic: Đường cơ sở về lý tưởng.
  • bottom: Phần dưới cùng của hình vuông.

Cú pháp:

  ctx  .textBaseline = value 

Vị trí của mỗi giá trị đường cơ sở, liên quan đến hộp giới hạn, được hiển thị trong hình sau:

text baseline

Ví dụ: HTML5 Canvas,

text baseline

ví dụ

Trong ví dụ sau, văn bản được căn giữa theo chiều dọc (textBaseline = ‘middle) trong hộp giới hạn.

Đường cơ sở văn bản canvas HTML5

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "400" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext ('2d');
cho (i = 0; i & lt; 500; i + = 10)
      {
        ctx.moveTo (0, i);
        ctx.strokeStyle = "# E8D8D8";
        ctx.lineTo (canvas.width, i);
        ctx.stroke ();
        
      }
         cho (i = 0; i & lt; 511; i + = 10)
      {
        ctx.moveTo (i, 0);
        ctx.strokeStyle = "# E8D8D8";
        ctx.lineTo (i, canvas.height);
        ctx.stroke ();
      }
     ctx.beginPath ();
     ctx.moveTo (0, 300);
  
ctx.font = "Phông chữ không xác định 80px, sans-serif";
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 ctx.textAlign = 'trung tâm';
 ctx.textBaseline = 'middle';
 ctx.fillStyle = 'blue';
 ctx.fillText ('w3resource', x, y);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Số liệu Văn bản

Trong HTML5 canvas, phương thức MeasureText () được sử dụng để lấy số liệu văn bản của văn bản HTML5 Canvas. Phương thức này trả về một đối tượng có chứa chiều rộng (tính bằng pixel) của văn bản được chỉ định.

Cú pháp:

 var textWidth =  ctx  .measureText (text) 

Ví dụ: HTML5 Canvas, ví dụ về số liệu văn bản

Ví dụ sau trả về chiều rộng (tính bằng pixel) của một văn bản nhất định.

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas - Văn bản & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "600" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ("DemoCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext ('2d');
var text = 'w3resource';
ctx.font = "Phông chữ không xác định 24px, sans-serif";
ctx.fillText (văn bản, 120, 40);
var metrics = ctx.measureText (text);
cảnh báo (metrics.width);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;  

Trình chỉnh sửa mã:

Xem Pen html css common editor
bởi w3resource ( @ w3resource ) trên
CodePen .

Trước đó: HTML5 Canvas: Gradients and Patterns
Tiếp theo:
HTML5 Canvas: Thêm bóng


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

Add Text To HTML Canvas | Drawing App Tutorial Part 6

alt

  • Tác giả: Redhwan Nacef
  • Ngày đăng: 2021-10-25
  • Đánh giá: 4 ⭐ ( 4003 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey! It’s been a while. Today we are learning to add text to our drawing app as I got few requests for this. Another long one, might need to refactor this app at some point so it’s less hackey! Hope you enjoy 🙂

    Useful Links:
    GitHub: https://github.com/redhwannacef/youtube/tree/main/excalidraw-tutorial
    Drawing App Series: https://youtube.com/playlist?list=PLSxgVLtIB0IFmQGuVMSE_wDHPW5rq4Ik7
    MDN Docs Text: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
    MDN Docs Measure Text: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText

    Music:
    https://youtu.be/MRh2oJQRacU
    Huge thank you to Harris Heller for providing copyright-free music.

    Hey everyone! My name is Redhwan Nacef (Red for short). In this channel, I’m hoping to share my thoughts on software engineering, coding, management, and all things tech. I hope you enjoy!

Bài 35: Phần tử canvas trong HTML5

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 4053 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần tử canvas trong HTML5 được sử dụng để vẽ đồ họa trên trang web, với một ngôn ngữ script, có thể vẽ đường thẳng, hình hộp, vòng tròn, chữ, chèn ảnh,v.v.

Giới thiệu HTML5 Canvas

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 8114 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. HTML5 Canvas là gì?

Đồ họa canvas trong HTML (HTML Canvas Graphics)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 6791 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML canvas là gì?, Ví dụ về canvas cơ bản, Cách thêm JavaScript vào canvas

Hướng dẫn vẽ HTML5: Khái niệm cơ bản về Vẽ Canvas

  • Tác giả: vi1.activereload.net
  • Đánh giá: 5 ⭐ ( 9078 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn này trình bày cách sử dụng phần tử canvas trong HTML5 để vẽ đồ họa đầy màu sắc cho trang web của bạn. Hai ví dụ phong phú được giới thiệu và giải thích từng bước.

[HTML/HTML5] Phần 39: Tìm hiểu về phần tử Canvas trong HTML5

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 7583 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Vẽ văn bản nhiều dòng lên Canvas

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3976 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Thật không may, Android không biết nó \nlà gì . Những gì bạn phải làm là…

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