Vải javascript

Sử dụng phần tử không khó lắm, nhưng bạn cần có hiểu biết cơ bản về HTML và JavaScript. Phần tử không được hỗ trợ trong một số trình duyệt cũ nhưng được hỗ trợ trong các phiên bản gần đây của tất cả các trình duyệt chính. Kích thước mặc định của canvas là 300 pixel × 150 pixel (chiều rộng × chiều cao). Nhưng kích thước tùy chỉnh có thể được xác định bằng cách sử dụng thuộc tính HTML height và width. Để vẽ đồ họa trên khung vẽ, chúng tôi sử dụng một đối tượng ngữ cảnh JavaScript, đối tượng này tạo ra đồ họa một cách nhanh chóng

1. sử dụng cơ bản
2. Vẽ hình
3. Áp dụng phong cách và màu sắc
4. Vẽ văn bản
5. Sử dụng hình ảnh
6. phép biến hình
7. Tổng hợp và cắt
8. Hoạt hình cơ bản
9. Hoạt hình nâng cao
10. Thao tác pixel
11. Tối ưu hóa canvas
12. đêm chung kết

• Trang chủ đề canvas
• HTML5CanvasHướng dẫn

Do một lỗi kỹ thuật đáng tiếc xảy ra vào tuần của ngày 17 tháng 6 năm 2013, chúng tôi đã mất lịch sử của hướng dẫn này, bao gồm cả ghi nhận của tất cả những người đóng góp trước đây cho nội dung của nó. Chúng tôi xin lỗi vì điều này và mong bạn bỏ qua cho sự cố đáng tiếc này

Được thêm vào phiên bản HTML5, Canvas Hỗ trợ công việc vẽ đồ họa trên giao diện web nhờ sử dụng JavaScript. Ví dụ như bạn có thể thực hiện việc vẽ các hình hoặc đoạn thẳng hoặc đường gấp khúc tùy ý, tô màu cho hình, chèn ảnh hoặc thêm ứng dụng chuyển động cho hình hoặc ảnh…

Trong bài viết này chúng ta sẽ tìm hiểu về mã Canvas thông qua việc làm một ví dụ vẽ ảnh sử dụng API này

Canvas là gì?

Thẻ trong HTML được sử dụng để vẽ các hình ảnh trong trang web.

Trong thời hạn, chúng ta có thể sử dụng canvas để vẽ các hình như

Chúng ta sử dụng Javascript để vẽ hình trong canvas. Có thể xem cavas như một tờ giấy trắng, chúng ta viết mã Javascript để vẽ lên tờ giấy trắng đó

Canvas là một phần tử của HTML5, cho phép thực hiện thiết lập kết quả xuất đồ họa của các đối tượng hai chiều trên trang web. Canvas chiếm một vùng trong trang web với chiều rộng và chiều cao định trước. Sau đó, sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông tin qua một tập tin hàm đồ họa tương tự như các API 2D khác

Bởi vì Canvas có thể giúp hiển thị trực tiếp một số hình ảnh dễ dàng trên trình duyệt như

• Sơ đồ đơn giản
• Trang trí bổ sung cho giao diện người dùng
• Picture image
• Chart và map
• Có thể nhúng các ứng dụng vẽ
• Hoạt động tốt với các hạn chế của CSS

Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến ​​thức về Html và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1. 5 trở về sau, Opera 9 hoặc phiên bản mới hơn… Các bạn có thể tham khảo thêm tại đây. http. // caniuse. com/vải

Canvas chiếm một khu vực hình chữ nhật trên trang web mà kích thước của hình chữ nhật được quy định bởi nó. Lưu ý. Mặc định thẻ canvas sẽ không có đường viền và nội dung trống

• Khai báo thẻ như sau

<canvas id="exampleCanvas" width="500" height="300">

  
    <p>Your browser doesn’t currently support HTML5 Canvas.
    Please check caniuse.com/#feat=canvas for information on
    browser support for canvas.p>

  
canvas>

Lưu ý. Các thuộc tính và kích thước thường được xác định ngay bên trong thẻ canvas. You could have many tags

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

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

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

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

var c = document.getElementById("myCanvas");

• Ví dụ tạo đường viền cho thẻ canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

Vẽ trên Canvas bằng Javascript

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

Giải thích cho ví dụ trên. Trước tiên, ta tìm đến thẻ

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

var c = document.getElementById("myCanvas");

Sau đó, call function

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

Đối tượng

var c = document.getElementById("myCanvas");

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

Thuộc tính

var c = document.getElementById("myCanvas");

Thuộc tính

var c = document.getElementById("myCanvas");

Tọa độ Canvas

var c = document.getElementById("myCanvas");

Góc trên cùng bên trái của canvas đối tượng có tọa độ

var c = document.getElementById("myCanvas");

Do đó, hàm

var c = document.getElementById("myCanvas");

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

• Canvas – Vẽ đường thẳng

  Để vẽ đường thẳng trên canvas đối tượng, ta sẽ sử dụng 2 hàm sau

  • var ctx = c.getContext("2d");
    

    1 start point

  • var ctx = c.getContext("2d");
    

    2 endpoints

  Sau khi có 2 điểm ta phải sử dụng một trong các hàm vẽ đường thẳng, chẳng hạn như

  var ctx = c.getContext("2d");
  

  3

  Ví dụ. Định điểm bắt đầu là

  var c = document.getElementById("myCanvas");
  

  7 và điểm kết thúc là

  var ctx = c.getContext("2d");
  

  5. Sau đó dùng hàm

  var ctx = c.getContext("2d");
  

  3 vẽ một đường thẳng

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Kết quả

• Canvas – Vẽ hình tròn

  Để vẽ một hình tròn trên canvas, chúng ta sử dụng hàm

  var ctx = c.getContext("2d");
  

  7

  • var ctx = c.getContext("2d");
    

    8

  Sau khi xác định tọa độ và bán kính, chúng ta phải sử dụng một hàm vẽ nét vẽ chẳng hạn như nét vẽ() hoặc tô màu()

  Ví dụ. Tạo một vòng có giới hạn tại tâm là

  var ctx = c.getContext("2d");
  

  9, bán kính

  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
  

  0

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,50,0,2*Math.PI);
ctx.stroke();

Kết quả

• Canvas – Chữ

  Để viết một đoạn văn bản, hãy chú ý đến các thuộc tính và hàm sau

  • ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    1 – type signature for the texttext

  • ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    2 – Viết chữ trên ô canvas

  • ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    3 – Viết chữ trên ô canvas nhưng không tô màu cho chữ

  Ví dụ. Sử dụng

  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
  

  4 viết một đoạn văn bản có chiều cao là

  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
  

  5, sử dụng phông chữ

  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
  

  6

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Kết quả

• Canvas – Chuyển màu

  Sử dụng chuyển màu để tô hình chữ nhật, hình tròn, đường thẳng, văn bản. Có 2 loại gradient

  • ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    7 – Quét màu xuất phát từ 1 phía

  • ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    8 – Quét màu xuất phát từ tâm

  Hàm

  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
  

  9 quy định điểm quét dọc theo điểm quét(gradient). Độ dốc điểm có thể bất kỳ giữa

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();
  

  0 và

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();
  

  1. Sau khi thiết lập gradient, ta sử dụng

  var c = document.getElementById("myCanvas");
  

  4 hoặc

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();
  

  3 để gán gradient vào ô canvas

  Ví dụ. Sử dụng

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();
  

  4

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);

Kết quả.

• Canvas – Hình ảnh

  Để vẽ hình ảnh trên canvas, ta sử dụng hàm

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();
  

  5

  • var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
    

    6

  Ví dụ. Vẽ hình ảnh trên ô canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

Kết quả.

• Vẽ cờ Việt Nam. http. //jsfiddle. mạng/z7werpqv/2/

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

Kết quả.

• Vẽ cờ Nhật Bản. http. //jsfiddle. net/vs77sney/

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

Kết quả.

Với việc sử dụng thư viện

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Cảm ơn các bạn đã đọc bài viết của mình và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này