Hướng dẫn canva to html - canva sang html

Phần tử   trong HTML được sử dụng để vẽ đồ họa cho trang web.

Các đồ họa hình bên trái được tạo ra bởi . Nó gồm 4 phần: một hình chữ nhật màu đỏ, một hình chữ nhật có màu sám nhạt dần, một hình chữ nhật nhiều màu sắc và một chữ nhiều màu sắc.

Nội dung

• HTML Canvas là gì?
• Trình duyệt hỗ trợ
• Các ví dụ về Canvas
  • Ví dụ cơ bản về Canvas
  • Vẽ với JavaScript
  • Vẽ đường thẳng
  • Vẽ hình tròn
  • Chèn văn bản
  • Chèn văn bản với chữ dạng đường nét
  • Vẽ hình với màu biến đổi tuyến tính [Linear Gradient]
  • Vẽ hình với màu biến đổi từ tâm [Radial Gradient]
  • Chèn Ảnh

HTML Canvas là gì?

Trình duyệt hỗ trợ

Các ví dụ về Canvas

Ví dụ cơ bản về Canvas

Trình duyệt hỗ trợ

Các ví dụ về Canvas

Các ví dụ về Canvas

Ví dụ cơ bản về Canvas

Vẽ với JavaScript

Vẽ đường thẳng Luôn luôn đặt thuộc tính id [để có thể gọi trong script], thuộc tính width và height để đặt kích thước của canvas.

Vẽ hình tròn

Ví dụ cơ bản về Canvas

Vẽ hình tròn

Vẽ với JavaScript

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.fillStyle = "#FF0000";
ctx.fillRect[0,0,150,75];

Vẽ hình tròn

Vẽ đường thẳng

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.moveTo[0,0];
ctx.lineTo[200,100];
ctx.stroke[];

Vẽ hình tròn

Vẽ hình tròn

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.beginPath[];
ctx.arc[95,50,40,0,2*Math.PI];
ctx.stroke[];

Vẽ hình tròn

Chèn văn bản

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.font = "30px Arial";
ctx.fillText["Xin chào bạn",10,50];

Vẽ hình tròn

Chèn văn bản với chữ dạng đường nét

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.font = "30px Arial";
ctx.strokeText["Xin chào bạn",10,50];

Vẽ hình tròn

Vẽ hình với màu biến đổi tuyến tính [Linear Gradient]

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
// Tạo gradient
var grd = ctx.createLinearGradient[0,0,200,0];
grd.addColorStop[0,"red"];
grd.addColorStop[1,"white"];
// Gắn gradient
ctx.fillStyle = grd;
ctx.fillRect[10,10,150,80];

Vẽ hình tròn

Vẽ hình với màu biến đổi từ tâm [Radial Gradient]

Trình duyệt của bạn không hỗ trợ canvas.



var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];

// Create gradient
var grd = ctx.createRadialGradient[75,50,5,90,60,100];
grd.addColorStop[0,"red"];
grd.addColorStop[1,"white"];

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect[10,10,150,80];

Vẽ hình tròn

Chèn Ảnh

Image to use:


Canvas to fill:

Trình duyệt của bạn không hỗ trợ canvas.


Thêm ảnh vào canvas


function myCanvas[] {
var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
var img = document.getElementById["scream"];
ctx.drawImage[img,10,10];
}

Vẽ hình tròn

Vẽ hình tròn