[英]Drawing image to HTML canvas
我已經回顧了其他SO帖子和MDN文檔等,但仍然無法弄清楚為什么我的圖像沒有出現在畫布中。 我很感激任何幫助。
HTML
<canvas id="myCanvas" style="height:500px;width:500px;border:0.5px solid #979797;"></canvas>
JavaScript的
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = 'http://i.imgur.com/3dItN1Y.png';
發生這種情況是因為您使用CSS設置畫布的高度和寬度,如下所示:
<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas>
這是錯誤的代碼。 正確的方法是使用畫布的height
和width
屬性,如下所示:
<canvas id="myCanvas" height="500" width="500" style="border: 0.5px solid #979797;"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.