HTML5 Canvas

Thứ Hai, 23 tháng 12, 2013

HTML5 Canvas

Các yếu tố <canvas> được sử dụng để vẽ đồ họa, trên bay, trên một trang web.

Ví dụ ở bên trái cho thấy một hình chữ nhật màu đỏ, một hình chữ nhật gradient, một hình chữ nhật nhiều màu, và một số văn bản nhiều màu được vẽ lên vải.

Canvas là gì?

Các yếu tố <canvas> HTML5 được sử dụng để vẽ đồ họa, trên bay, thông qua kịch bản (thường là JavaScript).

Các yếu tố <canvas> chỉ là một container cho đồ họa. Bạn phải sử dụng một kịch bản để thực sự vẽ đồ họa.

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

Hỗ trợ trình duyệt

Internet Explorer 9 +, Firefox, Opera, Chrome, và Safari hỗ trợ các yếu tố <canvas>.

Lưu ý: Internet Explorer 8 và các phiên bản trước đó, không hỗ trợ các yếu tố <canvas>.

Tạo ra một Canvas

Một bức tranh là một khu vực hình chữ nhật trên một trang HTML, và nó được quy định với các yếu tố <canvas>.

Lưu ý: Theo mặc định, các yếu tố <canvas> không có biên giới, không có nội dung.

Đánh dấu trông như thế này:

<canvas id="myCanvas" width="200" height="100"></canvas>

Lưu ý: Luôn luôn ghi rõ một thuộc tính id (sẽ được đề cập đến trong một kịch bản), và chiều rộng và chiều cao thuộc tính để xác định kích thước của khung hình.

Mẹo: Bạn có thể có nhiều yếu tố <canvas> trên một trang HTML.

Để thêm một biên giới, sử dụng thuộc tính phong cách:

Ví dụ

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

Thử nó cho mình »

Vẽ Onto Các Canvas Với JavaScript

Tất cả các bản vẽ trên vải phải được thực hiện bên trong một JavaScript:

Ví dụ

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.

</canvas>

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

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

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Thử nó cho mình »

Ví dụ giải thích:

Đầu tiên, tìm các phần tử <canvas>:

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

Sau đó, gọi phương thức của nó getContext () (bạn phải vượt qua chuỗi "2d" với getContext (phương pháp)):

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

Các getContext ("2d") đối tượng là một built-in HTML5 đối tượng, với nhiều tài sản và phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản, hình ảnh, và nhiều hơn nữa.

Hai dòng tiếp theo vẽ một hình chữ nhật màu đỏ:

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

Tài sản fillStyle có thể là một màu CSS, một gradient, hoặc một mô hình. Các fillStyle mặc định là # 000000 (màu đen).

Các fillRect ( x, y, chiều rộng, chiều cao phương pháp) rút ra một hình chữ nhật đầy phong cách lấp đầy hiện tại.

Vải Tọa độ

Vải là một lưới hai chiều.

Góc trên bên trái của bức tranh đã phối hợp (0,0)

Vì vậy, fillRect () phương pháp trên có các thông số (0,0,150,75).

Điều này có nghĩa: Bắt đầu ở góc trên bên trái (0,0) và vẽ một hình chữ nhật 150x75 pixel.

Ví dụ tọa độ

Chuột lên hình chữ nhật dưới đây để xem x và y tọa độ:

Và

Vải - Đường dẫn

Để vẽ đường thẳng trên vải, chúng tôi sẽ sử dụng hai phương pháp sau đây:

moveTo ( x, y ) xác định điểm bắt đầu của đường
lineTo ( x, y ) xác định điểm kết thúc của dòng

Để thực sự rút ra những dòng, chúng ta phải sử dụng một trong những "mực" phương pháp, như đột quỵ ().

Ví dụ

Xác định một điểm khởi đầu ở vị trí (0,0), và điểm kết thúc ở vị trí (200.100). Sau đó sử dụng phương pháp () đột quỵ để thực sự thu hút các dòng:

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

Thử nó cho mình »

Để vẽ một vòng tròn trên một khung hình, chúng tôi sẽ sử dụng các phương pháp sau đây:

vòng cung (x, y, r, bắt đầu, dừng)

Để thực sự rút ra những vòng tròn, chúng ta phải sử dụng một trong những "mực" phương pháp, như đột quỵ () hoặc điền vào ().

Ví dụ

Tạo ra một vòng tròn với vòng cung () phương pháp:

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Thử nó cho mình »

Vải - Văn bản

Để vẽ văn bản trên một khung hình, tài sản quan trọng nhất và phương pháp:

font - định nghĩa các thuộc tính font chữ cho văn bản
fillText ( văn bản, x, y ) - Số trận hoà "lấp đầy" văn bản trên vải
strokeText ( văn bản, x, y ) - Số trận hoà văn bản trên vải (không có điền)

Sử dụng fillText ():

Ví dụ

Viết một văn bản đầy cao 30px trên vải, sử dụng font "Arial":

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

</script>

</body>

</html>

Thử nó cho mình »

Sử dụng strokeText ():

Ví dụ

Viết một văn bản cao 30px (không có điền) trên vải, sử dụng font "Arial":

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

Thử nó cho mình »

Vải - Gradients

Gradient có thể được sử dụng để điền vào hình chữ nhật, hình tròn, đường nét, văn bản, vv hình dạng trên vải không giới hạn màu sắc rắn.

Có hai loại khác nhau của gradient:

createLinearGradient ( x, y, x1, y1 ) - Tạo ra một gradient tuyến tính
createRadialGradient ( x, y, r, x1, y1, r1 ) - Tạo ra một radial / Gradient tròn

Một khi chúng ta có một đối tượng gradient, chúng ta phải thêm hai hoặc nhiều điểm dừng màu.

Phương pháp addColorStop () xác định các điểm dừng màu sắc, và vị trí của nó dọc theo gradient. Vị trí gradient có thể được bất cứ nơi nào giữa 0-1.

Để sử dụng gradient, thiết lập thuộc tính fillStyle hoặc strokeStyle gradient, và sau đó vẽ hình dạng, giống như một hình chữ nhật, văn bản, hoặc một dòng.

Sử dụng createLinearGradient ():

Ví dụ

Tạo ra một gradient tuyến tính. Điền vào hình chữ nhật với gradient:

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Thử nó cho mình »

Sử dụng createRadialGradient ():

Ví dụ

Tạo ra một xuyên gradient / tròn. Điền vào hình chữ nhật với gradient:

JavaScript:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</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);

</script>

</body>

</html>

Thử nó cho mình »

Vải - Hình ảnh

Để vẽ một hình ảnh trên một khung hình, chúng tôi sẽ sử dụng các phương pháp sau đây:

drawImage ( hình ảnh, x, y )

Hình ảnh để sử dụng:

Ví dụ

Vẽ hình ảnh vào vải:

JavaScript:

<!DOCTYPE html>

<html>

<body>

<p>Image to use:</p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

</script>

</body>

</html>

Thử nó cho mình »

«Trở lại

Chương tiếp theo »

Các tin khác

lập trình trực tuyến

Pages

Thứ Hai, 23 tháng 12, 2013

HTML5 Canvas

Canvas là gì?

Hỗ trợ trình duyệt

Tạo ra một Canvas

Ví dụ

Vẽ Onto Các Canvas Với JavaScript

Ví dụ

Vải Tọa độ

Vải - Đường dẫn

Ví dụ

Ví dụ

Vải - Văn bản

Ví dụ

Ví dụ

Vải - Gradients

Ví dụ

Ví dụ

Vải - Hình ảnh

Hình ảnh để sử dụng:

Ví dụ

Không có nhận xét nào:

Đăng nhận xét