Làm cách nào để tạo kiểu cho văn bản canvas HTML5 thành đậm và / hoặc nghiêng?

83

Tôi đang in văn bản lên canvas theo một cách khá đơn giản:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

Nhưng làm cách nào để thay đổi văn bản thành in đậm, nghiêng hoặc cả hai? Bất kỳ đề xuất để sửa chữa ví dụ đơn giản đó?

— Ritchie
nguồn

154

Bạn có thể sử dụng bất kỳ cái nào sau đây:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

Để biết thêm thông tin, đây là một số tài nguyên:

— Bánh vòng
nguồn

2

Arg đánh bại tôi vào nó, 1 lớn trang web để biết thêm, diveintohtml5.org/canvas.html#divingin

— Loktar

@Loktar Cảm ơn liên kết, đã bao gồm nó trong câu trả lời.

— Donut

về gạch dưới: stackoverflow.com/questions/4627133/...

— jedierikb

4

Bạn cũng có thể chỉ định trọng lượng phông chữ:ctx.font = "400 10pt Courier"

— Ivan P

Độ đậm phông chữ qua ctx.font = "400 10pt Open Sans"không hoạt động đối với tôi trong Chrome bằng Calibri hoặc Open Sans trong các phiên bản trình duyệt mới nhất

— sean2078

12

Chỉ cần lưu ý thêm cho bất kỳ ai tình cờ gặp phải điều này: hãy đảm bảo làm theo thứ tự hiển thị trong câu trả lời được chấp nhận.

Tôi đã gặp phải một số sự cố trên nhiều trình duyệt khi đặt hàng sai. Có "Verdana đậm 10px" hoạt động trong Chrome, nhưng không hoạt động trong IE hoặc Firefox. Chuyển nó thành "Verdana 10px đậm" như được chỉ ra đã khắc phục những sự cố đó. Kiểm tra kỹ đơn đặt hàng nếu bạn gặp sự cố tương tự.

— tddawson
nguồn

Chrome dường như đã thay đổi để phù hợp với Firefox. Xem cây viết này: codepen.io/anon/pen/BXNZxO

— ecc521

2

Vì vậy, không có cách nào để chỉ đặt font-weight(hoặc font-sizehoặc font-family...) trong một lệnh JS? Tất cả phải nằm trong một chuỗi phông chữ hoàn chỉnh?

— Jonathan Tuzman
nguồn

1

Không thể gạch chân thông qua bất kỳ phương thức hoặc thuộc tính canvas nào. Nhưng tôi đã làm một số công việc xung quanh để hoàn thành nó. Bạn có thể xem qua @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

Bạn có thể tìm thấy cách triển khai tại đây http://jsfiddle.net/durgesh0000/KabZG/

— Durgesh
nguồn