0
我想(我已经完成1-3):帆布动画剪贴蒙版路径
- 抓住从页面的图像
- 它的图像添加到画布元素
- 夹到面罩
- 移动(动画)图像
我已经完成了前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, '');
如何从画布上移动(动画)剪贴蒙版以显示剪切图像的不同部分?
感谢您的任何想法!
谢谢@ markE,太棒了!但是,我正面临着一个问题,它需要从div的背景中抓取图像(必须做到这一点),并将其放置在画布内以移动遮罩。我在这里更新了小提琴:http://jsfiddle.net/07mzbat9/2/。如果你有任何想法,我将不胜感激,因为这已经让我困惑了几天。谢谢!! – 2014-09-02 19:08:44
这里是我的小提琴修改为抓住div元素的背景图片:http://jsfiddle.net/m1erickson/56wqqmqe/祝你的项目好运! – markE 2014-09-02 19:56:07