Chia tỷ lệ phần tử canvas với độ phân giải tĩnh

Question

Tôi có phần tử canvas và tôi muốn giảm kích thước của nó xuống nhưng không thay đổi logic js. Không gian bản vẽ theo j luôn phải là 600x300px, ngay cả khi nó được hiển thị bằng HTML dưới dạng 300x150px. Tôi biết, tôi có thể thay đổi kích thước hình ảnh với độ phân giải tĩnh, nhưng tôi có thể làm tương tự với canvas không?

Answer 1

Thay đổi kích thước sử dụng CSS quy mô nó

Live Demo

Vì vậy, về cơ bản bạn thiết lập kích thước của nó cho các đối tượng vẽ, vv, qua width và height thuộc tính như vậy

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 600; 
canvas.height = 300; 

và sau đó thay đổi kích thước được hiển thị bằng css

#canvas{ 
    width: 300px; 
    height: 150px; 
}​ 

Answer 2

Loktar có một cách, sử dụng CSS, nhưng điều đó có thể khiến một số thứ trông buồn cười. Ví dụ, các đường dẫn được chia tỷ lệ bằng cách sử dụng CSS và được chia tỷ lệ bằng cách sử dụng biến đổi riêng của canvas có thể trông rất khác (với CSS trông có vẻ xấu và các khung hình trông mịn). Điều này phụ thuộc vào trình duyệt mặc dù và có thể là hoàn toàn tốt đẹp. Trên chrome ít nhất, văn bản thu nhỏ theo cách này trông rất tệ.

Thay vào đó tôi khuyên bạn nên nhìn vào những gì tôi đã viết ở đây về khái niệm "mô hình" phối: Working with canvas in different screen sizes

Viết tất cả mọi thứ như thể không gian vẽ là 600x300, nhưng giữ một tấm vải đó là 300x150.

Trước khi vẽ bất kỳ thứ gì sử dụng ctx.scale(0.5, 0.5); và mọi thứ sẽ trông tuyệt vời!

Hoàn toàn có thể sau khi tất cả viết một ứng dụng canvas và nó có quy mô cho tất cả các loại màn hình, ngay cả khi bạn chỉ nhắm mục tiêu một kích thước màn hình.