Question

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.src = document.getElementById("tempImg").src;
imageObj.onload = function () {
    var x = 188;
    var y = 30;
    var width = 200;
    var height = 137;
    context.drawImage(imageObj, x, y, width, height);
    context.font = "20pt Calibri";
    context.fillText(locationtxt, 40, 40);
};

<canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"></canvas>

图像的尺寸越来越大，不适合画布，图像也会旋转。

如何在画布中获取原始图像？

Answer 1

好的，请看下面的重写代码。

注意“imageObj.src = document.getElementById（”tempImg“）。src;”必须在 imageObj.onload之后。

我无法访问您的locationtxt或您的tempImg，因此我认为您确定它们不是您问题的根源。

这行代码将采用任意大小的图像，并通过缩放它来强制它适合您指定的画布大小。缩放时，如果画布尺寸与图像尺寸不成比例，则可能会出现图像失真。

context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);

这是你的代码 - 只是修改了一下：）

var canvas = document.getElementById("canvasPnl"); var context = canvas.getContext('2d'); var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude; var imageObj = new Image(); imageObj.onload = function () { context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height); context.font = "20pt Calibri"; context.fillText(locationtxt, 40, 40); }; imageObj.src = document.getElementById("tempImg").src;

Answer 2

<html>
<head>
    <title></title>
</head>
<style type="text/css">
#mycanvas
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
  var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
  var img1=new Image;
  img.src = 'ship.png';
  img1.src='3D025.jpg';
  img.addEventListener('load', function () {
     var width = img.naturalWidth; // this will be 300
  var height = img.naturalHeight; // this will be 400

    var interval = setInterval(function() {
      var x = 260, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img1, 0, y);
        ctx.drawImage(img, x, 300,width,height);

        x += 1;
        if (x > ctx.canvas.width) {
          x = 260;
         width=width-10;
         height=height-10;
         ctx.drawImage(img, x, 300,width,height);
        }
        if (x == 750) {
          x = 260;

        }
      };
    }(), 1000/40);
  }, false);
}, false);

</script>

<body>

<canvas id="myCanvas" height="600" width="1000"></canvas>

</body>
</html>

html5中的画布图像大小

2 个答案: