0
Я хочу (я достиг 1-3):Холст Animate Clipping Mask Path
- захватить изображение со страницы
- добавить его в холст элемент
- клип изображение на маске
- движение (одушевленные) маска вокруг изображения
Я выполнил первые 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 (нужно сделать это b/c структурой разметки) и разместить его внутри холста, чтобы переместить маску. Я обновил скрипку здесь: http://jsfiddle.net/07mzbat9/2/. Если у вас есть какие-то идеи, я бы это оценил, так как это заставило меня немного задержаться на несколько дней. Благодаря!! –
Здесь моя скрипка изменена, чтобы захватить фоновое изображение элемента div: http://jsfiddle.net/m1erickson/56wqqmqe/ Удачи вам в вашем проекте! – markE