0

キャンバスにいくつかの画像があります

var img1=new Image()
img1.src= "imgsrc.jpg"

var img2=new Image()
img2.src= "imgsrc.jpg"

var img3=new Image()
img3.src= "imgsrc.jpg"

次に画像を追加します

ctx.drawImage(img1,20,20);
ctx.drawImage(img2,40,40);
ctx.drawImage(img3,80,80);

しかし、私はそれらを個別に動かすのに苦労しています。それも可能ですか？例えば

img1.moveTo(30,30);
img2.moveTo(50,50);
img3.moveTo(60,60);

これが不可能な場合、代替手段はありますか？

4

2 に答える 2

1

キャンバスに何かを描いたら、アクセスしたり変更したりすることはできません。あなたができる唯一のことは、それを新しい場所に再描画することです（つまり、現在の場所から消去して、新しい場所に再度描画します）

それを達成したい場合はSVGを使用してください

于 2013-02-14T11:46:58.797 に答える
1

はい！

キャンバスに「保持モード」要素を許可するキャンバスライブラリはかなりあります。

「保持モード」を使用すると、キャンバス上 の各 画像/要素に対して、移動、拡大縮小、回転、傾斜、アニメーション、ドラッグ/ドロップ、ヒットテストなどの機能を実行できます。

私が保証できる人気のある3つのライブラリは、FabricJS、KineticJS、EaselJsです（他にも優れたライブラリがあります。誰も除外しないでください！）

これは、KineticJSを使用したフィドルで、キャンバス上にドラッグ可能な画像を表示します。---

http://jsfiddle.net/m1erickson/bJuLe/

そしてここにいくつかのコードがあります：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      p{font-size:25px;}
    </style>
  </head>
  <body>
    <p>Darth Vader is a "retained" image -- try dragging him around !</p>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
    <script>
      function drawImage(imageObj) { 
        var stage = new Kinetic.Stage({
          container: "container",
          width: 500,
          height: 400
        });
        var layer = new Kinetic.Layer();

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          image: imageObj,
          x: stage.getWidth() / 2 - 200 / 2,
          y: stage.getHeight() / 2 - 137 / 2,
          width: 200,
          height: 137,
          draggable: true
        });

        // add cursor styling
        darthVaderImg.on('mouseover', function() {
          document.body.style.cursor = 'pointer';
        });
        darthVaderImg.on('mouseout', function() {
          document.body.style.cursor = 'default';
        });

        layer.add(darthVaderImg);
        stage.add(layer);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    </script>
  </body>
</html>
于 2013-02-15T07:16:11.570 に答える