Html5-Canvas: Thay đổi kích thước Canvas theo trình duyệt

resize_view_fit_windowMột trong những yêu cầu thường thấy của game là thay đổi kích thước cửa cửa sổ game theo trình duyệt. Việc thay đổi này cần đảm bảo tốc độ của game không bị ảnh hưởng cũng như hình ảnh không bị biến dạng (giữ nguyên tỉ lệ chiều cao vào rộng).

Một trong những lợi thế của các trình duyệt hiện đại là hỗ trợ tính năng hardware accelerated cho canvas. Với cùng một pixel, trình duyệt có thể hiển thị canvas ở nhiều kích thước khác nhau.

Ví dụ như bạn gán canvas.width = 200 và canvas.height = 100, như vậy canvas có tất cả 20000 pixel. Và bạn có thể tăng gấp đôi kích thước của canvas lên nhưng lượng pixel mà bạn thao tác với canvas vẫn chỉ là 20000. Hay nói cách khác, việc xử lý và vẽ canvas với các kích thước khác nhau đã được bộ xử lý đồ họa (GPU) thực thi một cách tự động.

Ta phân biệt kích thước thựckích thước hiển thị của canvas. Kích thước thực của canvas được gán thông qua hai thuộc tính là width và height:

canvas.width = 200;
canvas.height = 100;

Kích thước hiển thị của canvas được xác định thuộc tính style.width và style.height (bằng javascript hoặc css):

canvas.style.width = “400px”;
canvas.style.height = “200px”;

Độ nét của canvas phụ thuộc vào kích thước thực của nó, vì vậy hãy giữ một tỉ lệ vừa phải giữa hai loại kích thước này.

Điều chỉnh canvas thao kích thước trình duyệt

Một ví dụ đơn giản để bạn áp dụng khi cần thiết. Không chỉ cho canvas, bạn có thể sử dụng cách này để hiển thị hình ảnh, video,… (như xem ảnh slideshow).

Auto resize canvas 1

Auto resize canvas 2

<html>
  <head>
  <title>Auto resize Canvas to fit Window</title>
    <style>
	body {
		margin: 0px;
		background-color: black;
	}

	canvas{
		position: absolute;
	}
    </style>

    <script type='text/javascript'>
	window.onload = function(){
		var canvas = document.getElementById("canvas");
		canvas.width = 600;
		canvas.height = 400;
		var context = canvas.getContext("2d");
		fitSize(canvas);
		window.onresize = function(){
			fitSize(canvas);
		};

		var img = new Image();
		img.onload = function(){
			context.drawImage(this,0,0,canvas.width,canvas.height);
		};

		img.src = "wallpaper.jpg";
	};
	function fitSize(canvas){
		var ratio = canvas.width/canvas.height;

		var width = window.innerWidth-5;
		var height = window.innerHeight-5;

		if(width/height>ratio)
			width = height*ratio;
		else
			height = width/ratio;

		canvas.style.width = width;
		canvas.style.height = height;

		canvas.style.top = (window.innerHeight-height)/2;
		canvas.style.left = (window.innerWidth-width)/2;
	}
    </script>
  </head>

  <body>
	<div id="container">
		<canvas id="canvas" style="margin:0px; border: 1px solid"> </canvas>
	</div>
  </body>
</html>

YinYangIt’s Blog

7 thoughts on “Html5-Canvas: Thay đổi kích thước Canvas theo trình duyệt

  1. Mình đã đọc rất kỹ bài viết. Nếu mình để css với width: 100% và height: 100%. Hay dùng canvas.style.width = width;
    canvas.style.height = height;
    thì những gì mình vẽ trong canvas sẽ không còn được rõ nét nữa.
    Làm sao để kích thước thực của canvas luôn là 100% kích thước của browser nhỉ?

    Trả lời

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s