Canvas và SVG là hai tính năng đồ họa thú vị được giới thiệu trong Internet Explorer 9 và được tăng tốc phần cứng

1. Sử dụng các phần tử Canvas

HTML cung cấp phần tử Canvas để xây dựng hình ảnh dựa trên raster.

Đầu tiên, hãy xây dựng một canvas để chứa thông tin pixel hình ảnh:

var canvas =document.createElement('canvas');

canvas.width = 500;

canvas.height = 250;

Sau đó chọn bối cảnh cho canvas, trong trường hợp này là hai chiều:
var ctx =canvas.getContext('2d');

Sau đó, đặt các thuộc tính liên quan đến văn bản:

ctx.font = '30px Cursive';

ctx.fillText("Hello world!", 50, 50);

Sau đó, chèn phần tử Canvas vào trang để có hiệu lực:

document.body.appendChild(canvas);

2. Sử dụng SVG

SVG là để xây dựng đồ họa dựa trên vector có thể mở rộng và có thể sử dụng trong HTML

Đầu tiên, hãy tạo một vùng chứa phần tử SVG với các kích thước:

var svg =document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.width = 500;

svg.height = 50;

Sau đó, xây dựng một phần tử văn bản với các đặc điểm định vị và phông chữ mong muốn:

var text =document.createElementNS('http://www.w3.org/2000/svg', 'text');

text.setAttribute('x', '0');

text.setAttribute('y', '50');>

text.style.fontFamily = 'Times New Roman';

text.style.fontSize = '50';

Sau đó, thêm văn bản thực tế để hiển thị vào phần tử văn bản:

text.textContent = 'Hello world!';

Cuối cùng, thêm phần tử văn bản vào vùng chứa SVG của chúng tôi và thêm phần tử vùng chứa SVG vào tài liệu:

svg.appendChild(text);

document.body.appendChild(svg);

3. Tệp hình ảnh (Image file)

Nếu bạn đã có tệp hình ảnh chứa văn bản mong muốn và đã đặt nó trên máy chủ bạn có thể thêm URL của hình ảnh và sau đó thêm hình ảnh vào tài liệu như sau:

var img = newImage();

img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';

document.body.appendChild(img);

Tham khảo GoalKicker.com

Nguồn: Devmaster Academy