HTML canvas - bản vẽ biến mất khi đổi kích thước

Question

Tôi đã tạo hình dạng cơ bản trong phần tử khung HTML hoạt động tốt.

Sự cố xảy ra khi tôi đổi kích thước canvas, tất cả bản vẽ trong canvas sẽ biến mất. Đây có phải là hành vi bình thường không? hoặc là có một chức năng có thể được sử dụng để ngăn chặn điều này?

Một cách để khắc phục điều này có thể là gọi lại chức năng vẽ trên canvas thay đổi kích thước tuy nhiên điều này có thể không hiệu quả nếu có nội dung lớn được vẽ.

Cách tốt nhất là gì?

Dưới đây là liên kết để mẫu mã https://gist.github.com/2983915

Answer 1

Bạn cần phải vẽ lại cảnh khi bạn thay đổi kích thước.

đặt chiều rộng hoặc chiều cao của canvas, ngay cả khi bạn đặt giá trị đó thành cùng một giá trị như trước, không chỉ xóa canvas nhưng đặt lại toàn bộ ngữ cảnh canvas. Bất kỳ thuộc tính nào được đặt (fillStyle, lineWidth, vùng cắt, v.v.) cũng sẽ được đặt lại.

Nếu bạn không có khả năng vẽ lại cảnh từ bất kỳ cấu trúc dữ liệu nào bạn có thể đại diện cho canvas, bạn luôn có thể lưu toàn bộ canvas bằng cách vẽ nó vào canvas trong bộ nhớ, thiết lập chiều rộng ban đầu và vẽ canvas trong bộ nhớ trở lại canvas ban đầu.

Dưới đây là một ví dụ thực sự nhanh chóng tiết kiệm bitmap vải và đưa nó trở lại sau một thay đổi kích thước:

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

Mỗi lần bạn thay đổi kích thước canvas nó sẽ thiết lập lại bản thân để transparant đen, as defined in the spec.

Bạn có thể sẽ phải:

• vẽ lại khi bạn thay đổi kích thước canvas, hay,
• không thay đổi kích thước canvas

Answer 3

Tôi cũng đã gặp problem.but này sau khi một thí nghiệm, tôi thấy rằng Thay đổi kích thước các yếu tố canvas sẽ tự động xóa tất cả các bản vẽ khỏi canvas! chỉ cần thử mã bên dưới

<canvas id = 'canvas'></canvas> 
<script> 
    var canvas1 = document.getElementById('canvas') 
    console.log('canvas size',canvas1.width, canvas1.height) 
    var ctx = canvas1.getContext('2d') 
    ctx.font = 'Bold 48px Arial' 
    var f = ctx.font 
    canvas1.width = 480 
    var f1 = ctx.font 
    alert(f === f1) //false 
</script>