Question

我想命令我的形象。

基本上我已经有了这个代码; 但是如何将我的图像移动到所需的位置？就像左边的一点点，更靠右边，我的意思是坐标......我应该把它放在哪里？

  if(document.getElementById('fig1').checked){
        var canvas = document.getElementById('displaycake_sketch');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 10, 10);
      };
      imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';

      }

提前谢谢！

Answer 1

画布的drawImage()方法有两个坐标（x和y）。如果查看documentation，您会看到，drawImage()方法的第二个和第三个参数分别代表图像的x-coordinates和y-coordinates。因此，您可以通过更改这些坐标将图像移动到所需位置。

context.drawImage(imageObj, 10, 10)
                             ^   ^

<强>样本

var canvas = document.getElementById('displaycake_sketch');
var context = canvas.getContext('2d');
var context2 = document.getElementById('displaycake_sketch_2').getContext('2d');
var imageObj = new Image();
imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';
imageObj.onload = function() {
  context.drawImage(imageObj, 10, 10);
  context2.drawImage(imageObj, 25, 85);
};

#displaycake_sketch, #displaycake_sketch_2 {
  background-color: pink;
}

<canvas width="298" height="397" id="displaycake_sketch"></canvas>
<canvas width="298" height="397" id="displaycake_sketch_2"></canvas>

Answer 2

context.drawImage(imageObj, 10, 10);

这是控制坐标的线;第一个10是x值，第二个10是y值。

Answer 3

您可以使用带有.drawImage(image,x,y)功能

的x，y坐标移动图像

if(document.getElementById('fig1').checked){
      var canvas = document.getElementById('displaycake_sketch');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 20, 20);
      };
      imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';    
 }

参考：https://www.w3schools.com/graphics/canvas_images.asp

HTML5画布显示图像

3 个答案: