tôi ở đây html
Nó chứa nội dung sau:
hiện hữu css
thượng đẳng:
#MarkingCanvas { chiều rộng: 100%; màu nền: #7986CB; chiều cao: 96%;
#MarkingImage { vị trí: tuyệt đối }
hiện hữu js
thượng đẳng:
hàm LoadImage()
{
var markImage = Hình ảnh mới();
markImage.addEventListener('load', function()
{
m_imageWidth = this.naturalWidth;
m_imageHeight = this.naturalHeight;
m_markingCanvasContext.drawImage(markingImage, 0, 0, m_imageWidth, m_imageHeight);
});
markImage.src = 'PICT0001.JPG';
}
Vấn đề là đầu ra này kéo dài hình ảnh và chất lượng của nó trở nên rất kém (xem phần đính kèm "Bản gốc" và "Kết quả").
Khi tôi gỡ lỗi, tôi có thể thấy kích thước của Canvas của mình là:
Chiều rộng - 1410
Chiều cao - 775
Nếu kích thước hình ảnh của tôi là:
Chiều rộng - 551
Chiều cao - 335
Vì vậy, câu hỏi của tôi là: tại sao hình ảnh không được đặt ở kích thước ban đầu? Ý tôi là, có rất nhiều chỗ trên Canvas. Ngoài ra, tại sao hình ảnh bị kéo dài và kết quả có chất lượng kém. Có vẻ như nó vượt quá kích thước của Canvas.
Tôi đang thiếu gì ở đây?
Bạn cần thiết lập động chiều rộng và chiều cao của Canvas dựa trên chiều rộng và chiều cao của cửa sổ trình duyệt. Ngoài ra, không cần sử dụng hình ảnh chiều rộng tự nhiên/chiều cao tự nhiên
.
var m_markingCanvas = document.getElementById('MarkingCanvas');
var m_markingCanvasContext = m_markingCanvas.getContext('2d');
// thiết lập chiều rộng và chiều cao canvas một cách linh hoạt
m_markingCanvas.width = window.innerWidth;
m_markingCanvas.height = window.innerHeight;
hàm LoadImage() {
var markImage = Hình ảnh mới();
markImage.addEventListener('load', function() {
m_markingCanvasContext.drawImage(this, 0, 0);
});
markImage.src = '/image/a3Wpy.jpg';
}
LoadImage();
Tôi là một lập trình viên xuất sắc, rất giỏi!