Bạn đang xem : hướng dẫn canvas html5 cho người mới bắt đầu

Hướng dẫn về HTML5 Canvas

Cập nhật lần cuối vào ngày 28 tháng 5 năm 2022 06:49:18 (UTC / GMT +8 giờ)

Giới thiệu

Canvas là một trong những tính năng được tìm kiếm nhiều nhất trong HTML5. Các nhà phát triển thích sử dụng nó để tạo các ứng dụng web phong phú. Người dùng có thể sử dụng các ứng dụng đó mà không cần sử dụng các plug-in trình duyệt độc quyền như trình phát flash của Adobe. Hầu hết các trình duyệt hiện đại như Chrome, Firefox, Safari, Opera, IE9 và 10 đều hỗ trợ nó. Trong giây lát, chúng tôi sẽ xem canvas có khả năng gì và bạn có thể sử dụng nó như thế nào. Nếu bạn chưa quen với HTML5, trước khi tìm hiểu bài viết này, hãy thử tìm hiểu thêm tại đây .

Phần tử Canvas dùng để làm gì?

Chính thức canvas là “canvas bitmap phụ thuộc vào độ phân giải có thể được sử dụng để hiển thị đồ thị, đồ họa trò chơi hoặc các hình ảnh trực quan khác một cách nhanh chóng”. Nói một cách đơn giản, với sự trợ giúp của JavaScript và phần tử canvas HTML5, bạn có thể hiển thị các hình dạng 2D và hình ảnh bitmap. Hình ảnh dưới đây cho thấy canvas có viền đen.

html5 hình chữ nhật canvas

Nếu bạn không thấy điều này quá thú vị, vui lòng đọc tiếp. Chúng ta sẽ xem hình chữ nhật nhàm chán được vẽ bằng canvas này có thể được siêu tốc như thế nào để cung cấp cho bạn một đồ họa tuyệt vời.

Một trang web có thể chứa nhiều phần tử canvas. Mỗi canvas có thể có một id bằng cách sử dụng mà bạn có thể nhắm mục tiêu một canvas cụ thể thông qua JavaScript.
Mỗi phần tử canvas có một Bối cảnh 2D. Điều này lại có các đối tượng, thuộc tính và phương thức. Tinkers những thứ này, bạn có thể vẽ những thứ của mình.
Để vẽ trên canvas, bạn cần tham khảo bối cảnh của canvas. Ngữ cảnh cung cấp cho bạn quyền truy cập vào các thuộc tính và phương pháp 2D. Chúng tôi sẽ đi sâu hơn vào ngữ cảnh sau.

Mọi phần tử canvas đều có tọa độ x và y. X là tọa độ ngang và y là tọa độ dọc. Hình ảnh sau đây cho thấy các tọa độ này trên canvas.

html5 hình chữ nhật canvas với trục x và y

Làm rõ mối quan hệ SVG – Canvas

Điều quan trọng là phải hiểu sự khác biệt giữa SVG và phần tử canvas. SVG là một định dạng đồ họa vector dựa trên XML. Bạn có thể thêm kiểu vào nó bằng CSS và thêm hành vi động cho nó bằng SVG DOM. Canvas dựa trên bitmap. Nó cho phép bạn vẽ đồ họa và hình dạng thông qua JavaScript. Giống như SVG, bạn có thể thêm phong cách và hành vi năng động cho nó. Dưới đây là một số lý do để sử dụng canvas trên SVG.

  • Khi cần vẽ đồ họa phức tạp, canvas nhanh hơn
  • bạn có thể lưu hình ảnh ra khỏi canvas trong khi bạn không thể sử dụng SVG
  • mọi thứ trong canvas đều là pixel.

SVG cũng có một số lợi thế.

  • Không phụ thuộc vào độ phân giải, nó có thể thay đổi tỷ lệ cho các độ phân giải màn hình khác nhau
  • Vì nó là XML ẩn nên việc nhắm mục tiêu các phần tử khác nhau dễ dàng hơn
  • rất giỏi trong các hoạt ảnh phức tạp

Vậy nên chọn cái nào hơn cái khác? để phát triển đồ họa dựa trên vectơ, tương tác cao và phụ thuộc vào độ phân giải, hãy chọn SVG. Nếu bạn muốn kết xuất đồ họa thực sự nhanh, như trong trò chơi hoặc không muốn xử lý XML, hãy chọn canvas. Trên thực tế, chúng bổ sung cho nhau trong khi cung cấp các ứng dụng trong thế giới thực.

Canvas và Tăng tốc phần cứng

Với các trình duyệt hỗ trợ Tăng tốc phần cứng, với tư cách là nhà phát triển, bạn sẽ thấy hài lòng. Bởi vì điều đó hiển thị hình ảnh / hoạt ảnh với tốc độ mà bạn mong muốn mà người dùng của bạn nên trải nghiệm. Hãy đi sâu một chút.

Máy tính để bàn hiện đại có GPU (Bộ xử lý đồ họa) cùng với CPU (Bộ xử lý trung tâm). Khi nói đến việc cung cấp hình ảnh / hoạt ảnh nhanh, hoạt động do GPU đảm nhận, CPU tiếp tục máy chủ cho phần còn lại của tác vụ, dẫn đến hiệu suất đồ họa được tăng tốc.

Chrome 27, Firefox 22, IE10 và Opera Next hỗ trợ tăng tốc phần cứng và cho thấy sự cải thiện đáng kể trong kết xuất đồ họa.

Vì JavaScript là mã công việc đằng sau Canvas, một số điều chỉnh hiệu suất có thể được sử dụng cho trải nghiệm người dùng bằng cách hiển thị hình ảnh / hoạt ảnh nhanh hơn.

Canvas 2D API

API canvas 2D là một đối tượng cho phép bạn vẽ và thao tác các hình ảnh và đồ họa trên phần tử canvas. Để tham chiếu ngữ cảnh của canvas, bạn gọi getContext, là một phương thức trên phần tử canvas. Nó có một tham số, hiện là 2d. Đây là đoạn mã để tham chiếu ngữ cảnh.

Mỗi canvas có ngữ cảnh riêng, vì vậy nếu trang của bạn chứa nhiều phần tử canvas; bạn phải có tham chiếu đến từng ngữ cảnh riêng mà bạn muốn làm việc.

Ngoài getContext, có rất nhiều chức năng khác (các chức năng của một đối tượng được gọi là phương thức trong JavaScript) mà bạn tùy ý sử dụng trong canvas 2D API. Dưới đây là một số điểm đáng chú ý.

Chức năng Chuyển đổi:

  • quy mô – cho phép bạn mở rộng bối cảnh hiện tại.
  • xoay – cho phép bạn xoay các tọa độ x và y của ngữ cảnh hiện tại.

Chức năng của Tiểu bang:

  • lưu – cho phép bạn lưu trạng thái hiện tại của ngữ cảnh.
  • khôi phục – cho phép bạn khôi phục trạng thái của ngữ cảnh từ trạng thái đã lưu trước đó.

Các Hàm Văn bản

  • phông chữ – lấy hoặc đặt phông chữ cho ngữ cảnh hiện tại.
  • fillText – hiển thị văn bản đã điền vào canvas hiện tại.
  • MeasureText – đo chiều rộng hiện tại của văn bản được chỉ định.

Làm việc với Canvas

Khi chúng ta đã quen với những kiến ​​thức cơ bản về Canvas, chúng ta sẽ khám phá một số tính năng của Canvas mà chúng ta có thể sử dụng. Trong phần này, chúng tôi sẽ tập trung vào cách sử dụng cơ bản của Canvas, tức là tạo đồ họa động, nhanh bằng cách sử dụng JavaScript. Nhưng điều đáng nói là bên cạnh đó, còn có một số khía cạnh khác của việc sử dụng Canvas, ví dụ: làm việc với API văn bản cho Canvas, WebGL – Đồ họa 3D với Canvas, API toàn màn hình, chế độ hòa trộn Canvas – Phương pháp xác định hiệu ứng tạo ra từ việc chồng hai lớp lên phần tử Canvas và Bản vẽ canvas CSS – Phương pháp sử dụng HTML5 Canvas làm hình nền .

Xem Thêm  Hàm Math.round () - GeeksforGeeks - hàm vòng trong javascript

Thiết lập Canvas

Để thiết lập canvas để vẽ, bạn phải thêm & lt; canvas & gt; trong HTML và gán bối cảnh bản vẽ 2D cho nó. Tất cả các thao tác vẽ được thực hiện trong ngữ cảnh

& lt; canvas & gt; phần tử

Trong HTML của bạn, hãy bao gồm các mã sau để xác định phần tử canvas, cung cấp cho nó chiều rộng và chiều cao.

& lt; canvas id = “myCanvas” height = “300” width = “400” & gt;
& lt; / canvas & gt;

Nếu chiều rộng hoặc chiều cao không được chỉ định, chiều rộng mặc định là 300 pixel và chiều cao mặc định là 150 pixel sẽ được sử dụng. Ban đầu canvas trống và trong suốt.

Bối cảnh kết xuất

& lt; canvas & gt; tạo ra một bề mặt bản vẽ có kích thước cố định để hiển thị một hoặc nhiều bối cảnh kết xuất, được sử dụng để tạo và thao tác nội dung được hiển thị. Chúng tôi sẽ tập trung vào bối cảnh kết xuất 2D. Các bối cảnh khác có thể cung cấp các kiểu kết xuất khác nhau; ví dụ: WebGL sử dụng ngữ cảnh 3D (“thử nghiệm-webgl”) dựa trên OpenGL ES.

Ban đầu canvas trống. Để hiển thị một thứ gì đó, trước tiên script cần truy cập vào ngữ cảnh kết xuất và vẽ trên đó. & Lt; canvas & gt; phần tử có một phương thức gọi là getContext (), được sử dụng để lấy bối cảnh kết xuất và các hàm vẽ của nó. getContext () nhận một tham số, kiểu ngữ cảnh. Đối với đồ họa 2D, chẳng hạn như đồ họa được đề cập trong hướng dẫn này, bạn chỉ định “2d”.

  var canvas = document.getElementById ('tutorial');
var ctx = canvas.getContext ('2d');  

Dòng đầu tiên truy xuất nút DOM cho & lt; canvas & gt; bằng cách gọi phương thức document.getElementById (). Khi bạn có nút phần tử, bạn có thể truy cập ngữ cảnh bản vẽ bằng cách sử dụng phương thức getContext () của nó, phương thức này trả về một đối tượng cung cấp các phương thức và thuộc tính để vẽ và thao tác với hình ảnh và đồ họa trên phần tử canvas trong tài liệu.

Kiểm tra sự hỗ trợ

Nội dung dự phòng được hiển thị trong các trình duyệt không hỗ trợ & lt; canvas & gt ;. Thông qua JavaScript, bạn có thể kiểm tra hỗ trợ theo chương trình bằng cách đơn giản kiểm tra sự hiện diện của phương thức getContext ().

Nếu một hệ tọa độ nằm trên cửa sổ trình duyệt của bạn, thì phần lớn vị trí trên cùng bên trái biểu thị (0,0). Di chuyển sang phải làm tăng giá trị của x và di chuyển xuống làm tăng giá trị của y. Vì vậy, nếu không có lề nào được đặt trên phần nội dung của tài liệu HTML, thì số xu (0,0) của cửa sổ trình duyệt của cửa sổ trình duyệt sẽ là của canvas. Xem đoạn mã sau:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = utf-8 / & gt;
& lt; title & gt; Vẽ một đường & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "DemoCanvas" width = "500" height = "400" & gt; & lt; / canvas & gt;
& lt; script & gt;
var canvas = document.getElementById ('DemoCanvas');
// Luôn kiểm tra các thuộc tính và phương thức để đảm bảo mã của bạn không bị hỏng trong các trình duyệt khác.
if (canvas.getContext)
{
 var ctx = canvas.getContext ('2d');
// mã vẽ ở đây
}
khác
{
// mã canvas-không được hỗ trợ tại đây
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Trình bày bằng hình ảnh của Canvas ở trên:

canvas mẫu HTML5 - w3resource

Hỗ trợ trình duyệt và polyfills

Giống như nhiều tính năng khác của HTML5, bạn cần kiểm tra xem Canvas có được hỗ trợ trong trình duyệt hiển thị hay không. Theo văn bản này, IE 9.0, 10.0 và 11.0, Firefox 2.0 đến 26.0, Chrome 4.0 đến 31.0, Safari 3.1 đến 7.0, Opera 9.0 đến 17.0, iOS Safari 3.2 đến 7.0, Opera mini 5.0-7.0, Trình duyệt Android 2.1-4.3, Blackberry 7.0 và 10.0 và IE Mobile 10.0 hỗ trợ Canvas cơ bản. Điều đó bao gồm hầu hết các trình duyệt hiện đại mà bạn có thể hiểu rõ.
Nếu bạn nghĩ rằng bạn có thể có khách truy cập từ các trình duyệt không hỗ trợ Canvas, bạn có thể sử dụng bất kỳ polyfills nào có sẵn. Sau đây là danh sách cách sử dụng tên (thông thường bạn thêm các mã đó trong phần đầu của trang HTML) của một số cách được sử dụng nhiều nhất

flashcanvas

  & lt;! - [nếu lt IE 9] & gt;
& lt; script type = "text / javascript" src = "path / to / flashcanvas.js" & gt; & lt; / script & gt;
& lt;! [endif] - & gt;
 

Bạn có thể tải xuống flashcanvas từ http://flashcanvas.net/download

explorercanvas

  & lt;! - [if IE] & gt; & lt; script src = "excanvas.js" & gt; & lt; / script & gt; & lt; ! [endif] - & gt;
 

Bạn có thể tải xuống explorercanvas từ http://code.google.com/p/explorercanvas/downloads/list

slcanvas

 
& lt; script src = "http://silverlightcanvas.appspot.com/static/slcanvas.js" & gt; & lt; / script & gt;
 

Bạn có thể thêm phần này vào cuối tài liệu HTML của mình.

Bạn có thể tải xuống slcanvas từ http://slcanvas.codeplex.com/releases/view/41025

fxcanvas

  & lt; script type = "text / javascript" src = "/ public / path / jooscript.js" & gt; & lt; / script & gt;
  & lt; script type = "text / javascript" src = "/ public / path / fxcanvas.js" & gt; & lt; / script & gt;
  & lt;! - [if IE] & gt; & lt; script type = "text / javascript" src = "/ public / path / flash_backend.js" & gt; & lt; / script & gt; & lt;! [endif] - & gt;
  & lt; bình luận & gt; & lt; script type = "text / javascript" src = "/ public / path / canvas_backend.js" & gt; & lt; / script & gt; & lt; / comment & gt;
 

Bạn có thể tải xuống fxcanvas từ http://code.google.com/p/fxcanvas/downloads/detail?name=fxcanvas-0.2(beta4)-supersonic.zip

kineticjs

Bạn có thể khám phá cách sử dụng kineticjs từ http://kineticjs.com/docs/

Bạn có thể tải xuống kineticjs từ

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas Demo & lt; / title & gt;
& lt; phong cách & gt;
#FirstCanvas {
chiều rộng: 500px;
chiều cao: 300px;
border: 3px màu xanh lục đặc;
background-color: cam;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "FirstCanvas" & gt; & lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;
 

HTML5 ảnh chụp màn hình ví dụ Canvas đơn giản

Bản trình diễn trực tiếp

Tạo canvas bằng nhiều phương pháp khác nhau

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về HTML5 Canvas với các phương pháp khác nhau & lt; / title & gt;
& lt; script & gt;
 window.onload = function () {
   var w3rcanvas = document.getElementById ("w3rCanvasTag");
   var w3rcontext = w3rcanvas.getContext ('2d');
   w3rcontext.fillStyle = 'rgb (0,0,255)'; // Đặt màu được sử dụng để tô một vùng
   w3rcontext.fillRect (0,0,400,400); // Điền vào một hình chữ nhật có vị trí tại x và y, với chiều rộng và chiều cao là w và h.
   w3rcontext.fillStyle = 'rgb (255,0,0)';
   w3rcontext.fillRect (50,50,300,300);
   w3rcontext.fillStyle = 'rgb (0,255,0)';
   w3rcontext.fillRect (100,100,200,200);
   w3rcontext.fillStyle = 'rgb (100,100,100)';
   w3rcontext.fillRect (125,175,150,25);
 }
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div & gt;
& lt; canvas id = "w3rCanvasTag" width = "400" height = "400" & gt; & lt; / canvas & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình canvas với nhiều phương pháp ví dụ

Bản trình diễn trực tiếp

Xem Thêm  CSV PHP - ghi vào csv php

Tạo canvas có độ trong suốt

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas với ví dụ minh bạch & lt; / title & gt;
& lt; script & gt;
  window.onload = function () {
    var w3rcanvas = document.getElementById ("w3rCanvasTag");
    var w3rcontext = w3rcanvas.getContext ('2d');
    w3rcontext.fillStyle = 'rgb (0,0,255)';
    w3rcontext.fillRect (30,30,300,300);
    w3rcontext.fillStyle = 'rgba (0,255,0,0.5)';
    w3rcontext.fillRect (60,60,300,300);
    w3rcontext.fillStyle = 'rgba (255,0,0,0.25)';
    w3rcontext.fillRect (90,90,300,300);
  }
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "w3rCanvasTag" width = "400" height = "400" & gt; & lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình canvas với ví dụ trong suốt

Bản trình diễn trực tiếp

Tạo canvas với gradient

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Ví dụ về gradient Canvas & lt; / title & gt;
& lt; script & gt;
  window.onload = function () {
    var w3rcanvas = document.getElementById ("w3rCanvasTag");
    var w3rcontext = w3rcanvas.getContext ('2d');
    var w3rgradient = w3rcontext.createRadialGradient (300.300.0.300.300.300);
    w3rgradient.addColorStop ("0", "magenta"); // Thêm điểm dừng màu vào gradient. Điểm dừng màu là một vị trí trong gradient nơi xảy ra sự thay đổi màu sắc. Phần bù phải nằm trong khoảng từ 0 đến 1.
    w3rgradient.addColorStop (". 25", "blue");
    w3rgradient.addColorStop (". 50", "xanh");
    w3rgradient.addColorStop (". 75", "màu vàng");
    w3rgradient.addColorStop ("1.0", "đỏ");
    w3rcontext.fillStyle = w3rgradient;
    w3rcontext.fillRect (0,0,400,400);
  }
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "w3rCanvasTag" width = "400" height = "400" & gt; & lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình canvas với ví dụ về gradient

Bản trình diễn trực tiếp

Sử dụng nhiều phần tử canvas

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; HTML5 Canvas Demo & lt; / title & gt;
& lt;! - [nếu IE] & gt;
  & lt; script type = "text / javascript" src = "excanvas.js" & gt; & lt; / script & gt;
& lt;! [endif] - & gt;
& lt; script & gt;
  window.onload = function () {
    var mycontext1 = document.getElementById ("myCanvasTag1"). getContext ('2d');
    var mycontext2 = document.getElementById ("myCanvasTag2"). getContext ('2d');
    var mycontext3 = document.getElementById ("myCanvasTag3"). getContext ('2d');
    var mycontext4 = document.getElementById ("myCanvasTag4"). getContext ('2d');
    // gradient 1
    var mygradient1 = mycontext1.createLinearGradient (30,30,90,90);
    mygradient1.addColorStop (0, "# FF0000");
    mygradient1.addColorStop (1, "# 00FF00");
    mycontext1.fillStyle = mygradient1;
    mycontext1.fillRect (0,0,100,100);
    // gradient 2
    var mygradient2 = mycontext2.createLinearGradient (30,30,90,90);
    mygradient2.addColorStop (1, "# FF0000");
    mygradient2.addColorStop (0, "# 00FF00");
    mycontext2.fillStyle = mygradient2;
    mycontext2.fillRect (0,0,100,100);

    var mygradient3 = mycontext3.createLinearGradient (30,30,90,90);
    mygradient3.addColorStop (0, "# 0000FF");
    mygradient3.addColorStop (.5, "# 00FFDD");
    mycontext3.fillStyle = mygradient3;
    mycontext3.fillRect (0,0,100,100);

    var mygradient4 = mycontext1.createLinearGradient (30,30,90,90);
    mygradient4.addColorStop (0, "# DD33CC");
    mygradient4.addColorStop (1, "# EEEEEE");
    mycontext4.fillStyle = mygradient4;
    mycontext4.fillRect (0,0,100,100);
  }
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div style = "margin-left: 30px;" & gt;
& lt; canvas id = "myCanvasTag1" width = "100" height = "100" style = "border: 10px blue solid" & gt;
& lt; / canvas & gt;
& lt; canvas id = "myCanvasTag2" width = "100" height = "100" style = "border: 10px green solid" & gt;
& lt; / canvas & gt;
& lt; br / & gt;
& lt; canvas id = "myCanvasTag3" width = "100" height = "100" style = "border: 10px red solid" & gt;
& lt; / canvas & gt;
& lt; canvas id = "myCanvasTag4" width = "100" height = "100" style = "border: 10px black solid" & gt;
& lt; / canvas & gt;
& lt; br / & gt; & lt; br / & gt;
& lt; a href = "index.html" & gt; quay lại & lt; / a & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình sử dụng nhiều phần tử canvas, ví dụ

Bản trình diễn trực tiếp

Văn bản bằng Canvas

 & lt;! LOẠI TÀI LIỆU HTML & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Văn bản Canvas HTML5 & lt; / title & gt;
& lt; script & gt;
function CreateText () {
var canvas = document.getElementById ("w3rCanvas");
var context = canvas.getContext ("2d");
 
var x = 100;
var y = 100;
        context.font = 'bold 32pt Arial'; // đặt kiểu, kích thước và kiểu phông chữ
        context.fillStyle = 'orange'; // đặt màu phông chữ
context.fillText ("Chào mừng bạn đến với w3resource!", x, y); // đặt văn bản được hiển thị
}
 
& lt; / script & gt;
& lt; / head & gt;
& lt; body onload = "CreateText ()" & gt;
& lt; canvas id = "w3rCanvas" width = "700" height = "150" & gt; & lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình sử dụng mẫu canvas văn bản

Bản trình diễn trực tiếp

Vẽ hình ảnh bằng Canvas

  & lt;! DOCTYPE HTML & gt;
& lt; html & gt;
  & lt; đầu & gt;
& lt; title & gt; Vẽ hình ảnh bằng Canvas & lt; / title & gt;
    & lt; phong cách & gt;
      thân hình {
        lề: 0px;
        đệm: 0px;
      }
    & lt; / style & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; canvas id = "w3rCanvas" width = "500" height = "400" & gt; & lt; / canvas & gt;
    & lt; script & gt;
      var canvas = document.getElementById ('w3rCanvas');
      var context = canvas.getContext ('2d');
      var imgObj = new Image ();

      imgObj.onload = function () {
        context.drawImage (imgObj, 150, 78);
      };
      imgObj.src = '//www.w3resource.com/images/logo.png';
    & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;
 

ảnh chụp màn hình ví dụ canvas hình ảnh vẽ

Bản trình diễn trực tiếp

Hoạt ảnh cơ bản với Canvas

  & lt;! doctype html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; meta charset = "UTF-8" / & gt;
    & lt; title & gt; Ví dụ về Hoạt ảnh Cơ bản với Canvas & lt; / title & gt;
  & lt; / head & gt;
& lt; body & gt;
        & lt; canvas id = "canvas" width = "400" height = "300" & gt;
         Nếu bạn có thể thấy thông báo này, trình duyệt của bạn không hỗ trợ Canvas
        & lt; / canvas & gt;
& lt; script & gt;
var canvas;
var ctx;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var width = 400;
var chiều cao = 300;

vòng tròn hàm (x, y, r) {
  ctx.beginPath ();
  ctx.arc (x, y, r, 0, Math.PI * 2, true);
  ctx.fill ();
}

hàm direct (x, y, w, h) {
  ctx.beginPath ();
  ctx.rect (x, y, w, h);
  ctx.closePath ();
  ctx.fill ();
}

 
đặt lại hàm () {
  ctx.clearRect (0, 0, width, height);
}

function init () {
  canvas = document.getElementById ("canvas");
  ctx = canvas.getContext ("2d");
  trả về setInterval (hoạt ảnh, 10);
}


function animate () {
  cài lại();
  ctx.fillStyle = "# FAF7F8";
  trực tràng (0,0, chiều rộng, chiều cao);
  ctx.fillStyle = "# 444444";
  hình tròn (x, y, 10);

  nếu (x + dx & gt; width || x + dx & lt; 0)
    dx = -dx;
  nếu (y + dy & gt; height || y + dy & lt; 0)
    dy = -dy;

  x + = dx;
  y + = dy;
}

trong đó();
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Bản trình diễn trực tiếp

Giải thích một chút về những việc cần làm để tạo hoạt ảnh đơn giản với Canvas như sau.

function circle, function direct được sử dụng để tạo hình tròn đang di chuyển và hình chữ nhật mà hình tròn đang hoạt hình trong đó. thiết lập lại chức năng xóa canvas. function init tạo canvas và trả về hoạt ảnh của hàm. setInterval được đặt thành 10 mili giây, vì vậy cứ sau 10 mili giây, vòng tròn sẽ chạm vào bất kỳ bề mặt nào.

Bán kính của hình tròn là 10 và điểm gốc của nó là (x, y). Nếu chúng ta thay đổi x và y, đường tròn sẽ chuyển động. dx và dy là hai biến để xác định lượng thay đổi được thực hiện sau mỗi 10 mili giây. x được thay đổi bởi dx sao cho giá trị của x + dx không lớn hơn chiều rộng của canvas hoặc nhỏ hơn 0. Khi đúng như vậy, chúng ta đảo ngược nó bằng cách làm cho dx = -dx. Khái niệm tương tự cũng được áp dụng cho y và dy.

Xem Thêm  Kiểm thử hệ thống/System Testing là gì - Hướng dẫn tối ưu cho người mới bắt đầu - system test là gì

Canvas trên điện thoại di động

Chúng tôi đã thấy danh sách Trình duyệt trên thiết bị di động hỗ trợ Canvas. Nhưng có một số vấn đề bạn cần lưu ý.

HTML5 Canvas là tất cả ảnh bitmap, có nghĩa là nó là tất cả các pixel. Điều này làm cho độ phân giải đồ họa hiển thị phụ thuộc. Hơn nữa, bạn không có các nút DOM để được thao tác ở đây. Nó cũng không phù hợp với giao diện người dùng ứng dụng. Bất cứ khi nào bạn muốn vẽ một cái gì đó, bạn cần phải vẽ cái đó theo cách thủ công (thông qua JavaScript).

Mặc dù vậy, bạn có thể mang lại khả năng phản hồi cho đồ họa Dựa trên Canvas bằng cách sử dụng một số chỉnh sửa trong JavaScript.

Canvas có thể được tạo ra để hoạt động với API Web worker thông qua proxy canvas mà các Web worker khôn ngoan khác sẽ không tiếp cận các nút DOM.

Thư viện

Có một số thư viện JavaScript có sẵn để dễ dàng quá trình làm việc với Canvas. Đây là danh sách ngắn

  • kinetic.js
  • Easel.js
  • Fabric.js
  • Ngựa vằn

Tiếp theo:
HTML5 Canvas Line


Xem thêm những thông tin liên quan đến chủ đề hướng dẫn canvas html5 cho người mới bắt đầu

HTML5 Canvas Tutorial for Beginners [How to Draw Shapes with JavaScript]

alt

  • Tác giả: Franks laboratory
  • Ngày đăng: 2020-08-14
  • Đánh giá: 4 ⭐ ( 1554 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Let’s learn how to draw shapes with JavaScript and create fabulous Fibonacci flowers all from scratch with just plain vanilla JavaScript. In this HTML5 Canvas Tutorial for Beginners we will take a look under the hood to see how canvas 2D API draws shapes and then we use that knowledge to create colorful flowers and seashells using so called ‘Fibonnacci flower formula’, also known as ‘Phyllotaxis’ and ‘Golden ratio’. This video will be very beginner friendly, you will be surprised how much you can do with so little JavaScript.

    LIKE the video please if you’re getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!

    Some of my favourite UDEMY courses:
    JavaScript Beginner Bootcamp (2020) https://bit.ly/3aqFFhc
    20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
    Learn SVG Animation – With HTML, CSS & Javascript https://bit.ly/2PRGwOr
    HTML, CSS, JavaScript – Build 6 Creative Projects https://bit.ly/33YIBjT

    Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0
    How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
    Next Level CSS Creative Hover & Animation Effects https://bit.ly/3jEkzju
    The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
    Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
    Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
    JavaScript Basics for Beginners https://bit.ly/32Tn5wq
    JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
    The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
    Modern JavaScript From The Beginning https://bit.ly/3fWJgWk

    Related videos:
    The fabulous Fibonacci flower formula (Mathologer) https://youtu.be/_GkxCIW46to
    Coding Challenge 30: Phyllotaxis (Coding train) https://youtu.be/KWoJgHFYWxY

    This HTML5 Canvas Tutorial for Beginners will be focused on the HTML canvas element and it’s fundamentals. We will look into how it works under the hood and where are all these methods that allow us to draw shapes come from and we will learn how to draw shapes with JavaScript
    Fibonacci sequence starts specifically with 0 and 1 and it is a very common interview question where you will asked to write an algorithm that returns numbers that create fibonacci sequence.
    To draw so called fibonacci flowers we don’t necessarily have to start with 0 and 1, we can also start with any two numbers we want, the only rule we cannot break is that each number in the sequence is the sum of the two preceding numbers

    This tutorial is part of a series – Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
    https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk–6IPYNh

    Tools every front-end web developer needs:
    Adobe Creative Cloud (Adobe Photoshop, Illustrator) https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)

    You can message me on TWITTER https://twitter.com/code_laboratory
    Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
    javascript htmlcanvas frankslaboratory

    Music:
    Business / Corporate by Mixaund | https://mixaund.bandcamp.com
    Music promoted by https://www.free-stock-music.com

    The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

Hướng dẫn tạo hiệu ứng tuyết rơi với Canvas HTML5

  • Tác giả: itzone.com.vn
  • Đánh giá: 3 ⭐ ( 2290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Thao tác HTML5 Canvas bằng cách sử dụng Konva: Phần 1, Bắt Đầu

  • Tác giả: code.tutsplus.com
  • Đánh giá: 3 ⭐ ( 7424 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bây giờ HTML5 canvas đã được hỗ trợ bởi tất cả các trình duyệt phổ biến được một thời gian dài. Bạn có thể sử dụng nó cho việc vẽ đồ họa trên một trình duyệt với sự giúp đỡ của JavaScript. Các…

Hướng dẫn vẽ hình HTML5 bằng canvas cơ bản

  • Tác giả: webmaster.vn
  • Đánh giá: 5 ⭐ ( 4074 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào các bạn, ở các bài trước mình đã giới thiệu cơ bản html5 với chủ đề thiết kế web cơ bản và thiết kế web seo trong tương lai.

    Bài viết này mình…

Hướng dẫn cơ bản về canvas trong HTML5

  • Tác giả: megacode.vn
  • Đánh giá: 5 ⭐ ( 1160 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Canvas là một phần tử mới xuất hiện trong HTML5 và rất hữu ích trong việc vẽ đồ họa trên nền web. Nó lần đầu được giới thiệu bởi Apple, sau đó được…

Hướng dẫn sử dụng canva cho người mới bắt đầu

  • Tác giả: nguyendinhanh.com
  • Đánh giá: 5 ⭐ ( 1646 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Canva là một công cụ thiết kế online đa năng, đơn giản mà bất cứ ai cũng có thể sử dụng dù bạn không biết gì về thiết kế. Với rất nhiều mẫu thiết kế có sẵn,

Tổng hợp tài liệu học lập trình HTML5 cho người mới bắt đầu

  • Tác giả: codegym.vn
  • Đánh giá: 5 ⭐ ( 5920 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giúp bạn có thêm những tài liệu tra cứu thì hôm nay CodeGym sẽ giới thiệu với các bạn những tài liệu học lập trình HTML5 cho người mới bắt đầu

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php