Canvas HTML5, tỷ lệ hình ảnh sau khi vẽ nó

Question

Tôi đang cố gắng mở rộng hình ảnh đã được vẽ thành canvas. Đây là mã:

 var canvas = document.getElementById('splash-container'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     // draw image at its original size 
     context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = 'images/mine.jpeg'; 


     // Now let's scale the image. 
     // something like... 
     imageObj.scale(0.3, 0.3); 

Tôi nên làm gì?

Answer 1

Bạn đang suy nghĩ sai. Khi bạn đã vẽ hình ảnh lên canvas, nó không có mối quan hệ với đối tượng imageObj. Không có gì bạn làm với imageObj sẽ ảnh hưởng đến những gì đã được vẽ. Nếu bạn muốn mở rộng hình ảnh, làm trong drawImage function:

drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3) 

Nếu bạn muốn animate rộng hoặc đang tìm kiếm để đạt được một số hiệu ứng khác mà đòi hỏi bạn phải vẽ hình ảnh ở kích thước đầy đủ ban đầu bạn sẽ có trước tiên clear it trước khi vẽ hình ảnh thu nhỏ.

Answer 2

robertc gì nói là đúng, nhưng nếu bạn thực sự muốn mở rộng quy mô một hình ảnh trên một canvas sau vẽ nó đối với một số lý do nào, bạn chỉ có thể mở rộng toàn bộ vải bằng cách sử dụng CSS thuộc tính chiều rộng/chiều cao và đó sẽ mở rộng quy mô các hình ảnh mà không cần phải vẽ lại.