bởi Adam Recvlohe
Trước Emoji, một số hình nền…
Tôi bắt đầu làm việc trong lĩnh vực phát triển web khoảng 6 tháng trước sau khi dành phần lớn sự nghiệp của mình cho giáo dục. Quá trình chuyển đổi diễn ra rất tuyệt vời và tôi rất biết ơn vì đã có cơ hội làm việc trên các ứng dụng web trong thế giới thực.
Tôi rất vui khi được làm việc trong ngành nhưng theo quan điểm của tôi, vẫn còn nhiều điều phải học hỏi. Do đó, kể từ ngày tôi bắt đầu với tư cách là Nhà phát triển JavaScript, tôi đã tiếp tục dành thời gian học vào mỗi buổi tối để nâng cao kỹ năng của mình.
Cùng với việc học, gần đây tôi đã bắt đầu dạy ‘Khóa học giới thiệu về JavaScript’ cho thanh thiếu niên Tampa Bay (tại The Iron Yard ở St.Pete, Florida). Đây là một kinh nghiệm tuyệt vời vì nhiều lý do. Đầu tiên, nó đã thách thức tôi tìm hiểu thêm về sự phức tạp và sắc thái của ngôn ngữ JavaScript.
Thứ hai, tôi đã có cơ hội dạy học trở lại, đó là một trong những niềm đam mê của tôi. Và thứ ba, tôi phải xem xét lại cách tôi đã học lập trình và điều đó khác biệt rõ rệt như thế nào với những người mới bắt đầu, những người thậm chí không chắc liệu họ có thích viết mã hay không và trong một số trường hợp, họ không quan tâm đến những gì tôi phải nói.
Bạn thấy đấy, chương trình giảng dạy mà ban đầu tôi nghĩ là tuyệt vời cho lớp này là JavaScript theo ba cách: JS trong DOM, JS trên máy chủ và lập trình JS chức năng.
Sau ngày đầu tiên, và sau cuộc nói chuyện vui vẻ từ các Trợ lý giảng dạy của mình, tôi nhận ra rằng mình hoàn toàn không có cơ sở. Những chủ đề này có thể khiến tôi quan tâm, nhưng chắc chắn không làm hài lòng một thanh niên chỉ muốn chơi các trò chơi được tài trợ bổ sung trên trình duyệt. Tôi hoàn toàn đánh giá lại những gì tôi sẽ dạy, và trong quá trình đó, tôi bắt đầu cảm thấy vui vẻ!
Dưới đây là bài học đầu tiên tôi dạy cho học sinh, nơi tôi bắt đầu thảo luận về các chức năng và kết thúc bằng việc tạo ra một biểu tượng cảm xúc mặt cười. Vui thích!
Nếu bạn muốn theo dõi khi chúng tôi nói về các chức năng, hãy mở trình duyệt và truy cập repl.it và bên dưới các ngôn ngữ phổ biến, hãy chọn NodeJS. Một REPL (Đọc đánh giá vòng lặp in) sẽ mở ra cho bạn và bạn có thể làm theo mã.
Chức năng là gì?
Để hiểu cách chúng ta sẽ sử dụng canvas HTML5, chúng ta phải hiểu một chút về các chức năng.
“Các chức năng là các mô-đun mã độc lập hoàn thành một nhiệm vụ cụ thể. Các hàm thường “tiếp nhận” dữ liệu, xử lý dữ liệu và “trả về” kết quả. Sau khi một chức năng được viết, nó có thể được sử dụng nhiều lần.”
Bây giờ hãy để tôi đưa cho bạn một vài ví dụ về loại hàm mà chúng ta sẽ xử lý.
Các loại chức năng
Chức năng Ole’ thông thường
Chúng tôi khai báo một chức năng cơ bản bằng cách sử dụng từ khóa JavaScript chức năng.
function sayHelloTo(name) { return ‘Hello ‘ + name;}sayHelloTo(‘Adam’);Hàm này nhận một tham số gọi là Tên. Nó là một biến được truyền cho gửi lời chào đến chức năng. Do đó, khi chương trình thực thi, nó sẽ truyền vào những gì được cung cấp. Trong trường hợp của tôi nó là Adamvì vậy trong bảng điều khiển, bạn sẽ thấy chào Adam.
Mô hình xây dựng
Chúng ta cũng có thể tạo một hàm bằng cách sử dụng mẫu hàm tạo.
function Person(name) { this.name = name; this.sayHello = function() { return “Hello, my name is “ + this.name; }}var me = new Person(“Adam”);me.sayHello();Từ khóa Javascript cái này đề cập đến chức năng. Điều đó có nghĩa là khi chúng ta chuyển vào một biến như Tên, giống như chúng ta đã làm trước đây, chúng ta có thể gán nó cho hàm và bất kỳ trường hợp nào của hàm đó. Để tạo một phiên bản, chúng tôi sử dụng từ khóa JavaScript Mới. Khi thể hiện mới này của hàm được tạo, nó cũng có các thuộc tính của nó là cái này.tên giá trị và một this.sayXin chào phương pháp. Khi chúng tôi tạo thể hiện của phương thức, chúng tôi đã chuyển vào tên của mình: var me = new Person(‘Adam’). Khi bạn nhìn vào nói xin chào phương pháp, nó sử dụng Tên, hiện là một phần của trường hợp đó, để tạo câu. Nếu bạn thực thi mã này trong REPL của NodeJS trên repl.it, bạn sẽ thấy nó xuất ra Xin chào, tên tôi là Adam.
Bây giờ chúng ta đã giải quyết xong những thứ nhàm chán, hãy vẽ lên một vài bức vẽ. Cách tôi dạy phần tiếp theo này là sử dụng codepen.io. Những gì tôi đề xuất là nếu bạn muốn làm theo, hãy truy cập codepen.io, tạo một tài khoản, sau đó tạo một cây bút mới và bạn sẽ sẵn sàng. Đảm bảo kích hoạt tài khoản của bạn nếu bạn muốn lưu công việc của mình.
Hãy vẽ trên vải
Đầu tiên, chúng ta cần tạo canvas để có thể vẽ trên đó. Trong HTML của bạn, hãy tạo một thẻ canvas.
<canvas id=“canvas”></canvas>Bây giờ là JavaScript từ đây!
Chúng ta cần lấy phần tử canvas của mình từ DOM và khai báo nó dưới dạng một biến. Điều này sẽ cho phép chúng tôi thiết lập bối cảnh của nó. Chúng tôi chưa thành thạo với ‘3d’, vì vậy chúng tôi sẽ gắn bó với bối cảnh ‘2d’.
var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);Chúng tôi cũng có thể cung cấp cho canvas của nó chiều rộng và Chiều cao tính chất.
var canvas = document.getElementById(“canvas”);canvas.width = 800;canvas.height = 800;var context = canvas.getContext(“2d”);Tôi muốn chỉ ra ở đây rằng Tranh sơn dầu đang hành động chính xác như một đối tượng. Nó có các thuộc tính và phương thức giống như chúng ta đã thấy từ hàm tạo ở trên. Hơi khác một chút về cách chúng tôi khai báo nó nhưng về mặt chức năng thì nó hoạt động rất giống nhau. Vì vậy, bạn thấy rằng nó có Chiều cao và chiều rộng tài sản cũng như một getContext phương pháp.
Bây giờ, hãy đặt tất cả những thứ đó vào một hàm để bạn có thể làm quen phần nào với lập trình hàm.
function draw() { var canvas = document.getElementById(“canvas”); canvas.width = 800; canvas.height = 800; var context = canvas.getContext(“2d”);}Không có gì sẽ hiển thị trên màn hình, chúng tôi sẽ sử dụng điềnRect phương pháp để giúp chúng tôi với điều đó.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}Nếu bạn chưa đoán ra thì điềnRect phương thức có bốn tham số: tọa độ x, tọa độ y, chiều rộng và chiều cao. Trên canvas, trục x bắt đầu từ 0 ở bên trái và đến vô tận ở bên phải. Trục y bắt đầu từ 0 từ trên xuống và đến vô cùng đi xuống. Vì vậy, khi chúng ta bắt đầu tại (10, 10), chúng ta đang đặt con trỏ tưởng tượng tại điểm (x = 10, y = 10) và đi 100 về bên phải và 200 về phía dưới từ điểm đó.
Như bạn có thể nhận thấy, nó vẫn chưa được thêm vào trang. thêm một đơn giản cửa sổ.onload chức năng và có nó bằng chức năng vẽ đã hoàn thành của chúng tôi.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}window.onload = draw;Bạn có thể thắc mắc tại sao chức năng vẽ được thực thi mặc dù chúng tôi không thực hiện nó với dấu ngoặc đơn ( ). Đó là bởi vì cửa sổ.onload là một chức năng. Điều đó cũng giống như nói:
window.onload = function() {// Do stuff here like what we put in draw();}Điều đó có nghĩa là cửa sổ.onload thực thi một chức năng khi cửa sổ được tải, vậy điều gì sẽ xảy ra sau cùng cửa sổ.onload với sức mạnh ma thuật của nó đặt các dấu ngoặc vô hình xung quanh bản vẽ, do đó thực hiện nó. Rất nhiều phép thuật có liên quan. Nhưng bây giờ bạn đã biết trò bịp bợm.
Hãy thêm một số màu sắc cho vui vẻ! Ở đây chúng tôi sử dụng điềnStyle phương pháp cho điều đó. Nó cần phải đến trước điềnRect hoặc nó sẽ không hiển thị.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(10,10, 100, 200);}window.onload = draw;Đây là một ví dụ về điều đó trên codepen:
Hãy vẽ một số hình dạng khác!
Điều đó khá đơn giản. Bây giờ chúng ta hãy vẽ một số hình dạng khác. Giống như chúng ta đã làm trước đây, chúng ta sẽ tạo một hàm và khởi tạo khung vẽ của mình bằng một chiều rộng, Chiều caovà bối cảnh.
function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}Vì vậy, chúng tôi không quên, thay đổi đang tải hàm lấy hàm tam giác bây giờ.
window.onload = triangle;Bây giờ chúng ta đã có khung vẽ của mình, hãy bắt đầu vẽ các đường trên khung vẽ để tạo hình tam giác của chúng ta.
function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50);}Ở đây chúng tôi đang bắt đầu đường dẫn của mình và di chuyển con trỏ đến điểm (x = 75, y = 50).
Bây giờ chúng ta hãy đi đến thị trấn vẽ một số dòng.
function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.stroke();}Điều này tạo ra hai dòng đầu tiên mà chúng tôi cần. Để kết thúc nó, chúng tôi quay trở lại nơi chúng tôi bắt đầu.
function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); // Back to where we started context.stroke();}Để tô vào tam giác ta có thể sử dụng phương pháp tô màu.
function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); context.stroke(); context.fill();}Đây là những gì trông giống như trong tự nhiên:
Bây giờ chúng ta có thể làm điều tương tự và dễ dàng tạo ra một kim tự tháp khổng lồ.
function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}Nhớ thay đổi đang tải hàm để hình chóp.
window.onload = pyramid;Bây giờ chúng ta hãy di chuyển con trỏ đến nơi chúng ta muốn.
function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0);}Tôi muốn kim tự tháp của mình chiếm càng nhiều không gian càng tốt, vì vậy tôi bắt đầu từ trên cùng của canvas và chính xác ở giữa trục x.
Bây giờ chúng ta có thể bắt đầu vẽ hình dạng của mình và điền vào nó.
context.lineTo(0, 400);context.lineTo(400, 400);context.lineTo(200, 0);context.stroke();context.fillStyle = “orange”;context.fill();Xong! Bây giờ bạn sẽ có một kim tự tháp màu cam đẹp mắt trên màn hình vì tất nhiên bạn là một phần của Illuminati. Đừng nói dối!
Đây là thành phẩm mà bạn có thể chơi với:
Biểu tượng cảm xúc!
Bây giờ cho những gì bạn đã đến: Biểu tượng cảm xúc!
Giống như chúng ta đã làm trước khi thiết lập khung vẽ của mình.
function smileyFaceEmoji() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 500; canvas.height = 500;}Nhớ thay đổi đang tải đến chức năng này.
window.onload = smileyFaceEmoji;Bây giờ hãy vẽ khuôn mặt của chúng ta.
context.beginPath();context.arc(250, 250, 100,0,Math.PI*2, true);context.stroke();Tôi đã chuyển đổi mọi thứ ở đây bằng cách sử dụng vòng cung chức năng. Các vòng cung hàm nhận khá nhiều đối số: tọa độ x, tọa độ y, bán kính, điểm bắt đầu tính bằng radian, điểm kết thúc tính bằng radian và liệu nó có được vẽ theo chiều kim đồng hồ hay không (chúng tôi đã nói đúng). Trái ngược với cách một hình chữ nhật được tạo bắt đầu từ một điểm và di chuyển đến điểm tiếp theo, điểm (x = 250, y = 250) thực sự là điểm giữa của hình tròn và sau đó mở rộng ra 100 pixel.
Tuyệt nhỉ?! Tiếp đến là đôi mắt.
context.moveTo(235, 225);context.arc(225, 225, 10, 0, Math.PI*2, true);context.moveTo(285, 225);context.arc(275, 225, 10, 0, Math.PI*2, true);context.stroke();Sau đó là miệng.
context.moveTo(250, 275);context.arc(250, 275, 50, 0, Math.PI, false); // Why is this last value false? Why did you just use Math.PI?context.moveTo(250, 275);context.lineTo(200, 275);context.stroke();Đây là sản phẩm hoàn chỉnh trông như thế nào:
Bạn đã làm được, bạn vừa tạo một biểu tượng cảm xúc mặt cười! Chúa ơi, tôi tự hào về bạn! Nếu bạn muốn nâng kỹ năng canvas của mình lên một tầm cao mới, hãy thử một trong những bài tập dưới đây.
bài tập
- Vẽ một biểu tượng cảm xúc poop.
- Vẽ tên viết tắt của bạn bằng chữ thảo.
Tóm tắt
Trong bài học này, bạn đã học về hàm: cách tạo hàm, thực thi hàm và sử dụng hàm để xây dựng các chương trình nhỏ vẽ các đường trên canvas. Chúng tôi đã học được rằng các hàm có nhiều dạng và có thể được cung cấp các thuộc tính và phương thức. Tôi hy vọng bạn thích bài học này vì mục đích của tôi là cho bạn thấy sức mạnh của các chức năng mà không làm bạn bối rối với các biệt ngữ, thay vào đó sử dụng các kích thích thị giác để đưa chúng vào cuộc sống!
Nếu bạn muốn xem tất cả mã cho bài học này, hãy truy cập codepen của tôi tại đây.
