0

やりたいこと (1-3 を達成した):

  1. ページから画像を取得する
  2. キャンバス要素に追加します
  3. 画像をマスクにクリップする
  4. 画像の周りでマスクを移動 (アニメーション)

最初の 3 つを達成しましたが、マスクの移動方法がわかりません。助けてください!

// get the canvas
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');  

// get a div from the page
var stuff = document.getElementsByName('testElem')[0];

// add a class to the div
stuff.setAttribute('class', 'pleaseWork');
var newImage = new Image();

// get the background image of the div
var bgClass = document.getElementsByClassName('pleaseWork')[0].style.backgroundImage;

  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var offset = 50;  

  // clip the context to create a circular clipping mask
  context.save();
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI, false);
  context.clip();

// on load put the image into the clipping mask
newImage.onload = function () {
    context.drawImage(newImage,0,0);
}

// put the background image from the div into the canvas (without the url())
newImage.src = bgClass.replace(/^url|[\(\)]/g, '');

キャンバスからクリッピング マスクを移動 (アニメーション化) して、クリッピングされた画像のさまざまな部分を表示するにはどうすればよいですか?

アイデアをありがとう！

4

1 に答える 1

0

クリップと描画のコードを関数に入れ、アニメーション ループ内でその関数を呼び出すことができます。

サンプルコードとデモ: http://jsfiddle.net/m1erickson/07mzbat9/

描画機能:

function draw(){

    // clear the canvas
    ctx.clearRect(0,0,cw,ch);

    // save the unclipped context
    ctx.save();

    // draw a circular path
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,PI2);
    ctx.closePath();
    ctx.stroke();

    // create a clipping path from the circular path
    // use the clipping path to restrict drawing 
    ctx.clip();
    ctx.drawImage(img,0,0);

    // restore the unclipped context (to remove clip)
    ctx.restore();
}

アニメーション ループ:

var cw=canvas.width;
var ch=canvas.height;
var cx=50;
var cy=50;
var radius=35;
var PI2=Math.PI*2;

// animate the mask across the canvas
function animate(time){
    if(cx-radius>cw || cy-radius>ch){return;}
    requestAnimationFrame(animate);
    cx+=0.2;
    cy+=0.2;
    draw();
}
于 2014-09-02T18:24:48.267 に答える