Vải html

Cafedev chia sẻ sẽ cho các ace về phần tử

3 trong HTML được sử dụng để vẽ đồ họa trên trang web

Đồ họa được tạo bằng

3. It has made ra. hình chữ nhật màu đỏ, hình chữ nhật gradient, hình chữ nhật nhiều màu và chữ nhiều màu

Nội dung chính

• 1. Canvas trong html là gì?
• 2. Canvas hỗ trợ trình duyệt
• 3. Ví dụ về Canvas
  • 3. 1. Vẽ 1 dòng
  • 3. 2. Vẽ hình tròn
  • 3. 3. vẽ chữ
  • 3. 4. Vẽ Stroke Text
  • 3. 5. Vẽ đường dốc
  • 3. 6. Vẽ tròn gradient
• 4. Vẽ hình

1. Canvas trong html là gì?

Phần tử

3 trong HTML được sử dụng để vẽ đồ họa, nhanh chóng, thông qua JavaScript

Phần tử

3 chỉ là một thùng chứa đồ họa. Bạn phải sử dụng JavaScript để thực hiện vẽ đồ họa

Canvas có một số phương pháp để vẽ đường, hộp, hình tròn, văn bản và thêm hình ảnh

2. Canvas hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản đầu tiên của trình duyệt được hỗ trợ đầy đủ phần tử

3

Thành phầnChromeIEFirefoxsafarioopera< canvas >4. 09. 02. 03. 19. 0

3. Ví dụ về Canvas

Canvas là một khu vực hình chữ nhật trên trang HTML. Theo mặc định, một khung vẽ không có khung và không có nội dung

Đánh dấu như thế này

Lưu ý. Luôn chỉ xác định một thuộc tính

4 [sẽ được đề cập trong tập lệnh] và thuộc tính

5 và

6 để xác định kích thước của khung vẽ. Để thêm một đường viền, hãy sử dụng thuộc tính

7

Dưới đây là một ví dụ về một khung vẽ cơ bản, trống rỗng

Sao chép và chạy mã

3. 1. Vẽ 1 dòng

Your browser does not support the HTML canvas tag.


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

Sao chép và chạy mã

3. 2. Vẽ hình tròn

Your browser does not support the HTML canvas tag.


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

Sao chép và chạy mã

3. 3. vẽ chữ

________số 8

Sao chép và chạy mã

3. 4. Vẽ Stroke Text

Your browser does not support the HTML canvas tag.


var c = document.getElementById["myCanvas"];
var ctx = c.getContext["2d"];
ctx.font = "30px Arial";
ctx.strokeText["Hello World",10,50];

Sao chép và chạy mã

3. 5. Vẽ đường dốc

0

3. 6. Vẽ tròn gradient

1

4. Vẽ hình

2

Nếu thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa