Это может быть не по теме, но я не знаю, где еще пойти с этим вопросом. Я просто начинаю с элемента canvas HTML5 и всех невероятно мощных вещей, которые он может сделать. Я надеялся, что кто-то может предложить некоторые советы. При работе с пользовательскими дорожками и кривыми безье, какой самый простой/лучший способ визуализировать, где точки принадлежат холсту, чтобы добиться желаемого эффекта. Прямо сейчас кажется, что я просто догадываюсь о создании точек в любом месте, надеясь получить нужный угол/форму.Визуализация html5 canvas
Чтобы быть более конкретным, я хочу создать фигуру, которая будет действовать как маска изображения, и позже ей понадобится анимировать эту фигуру. Подобно этой скрипке http://jsfiddle.net/jimrhoskins/dDUC3/1/ (чужая работа), но так как я не вижу, где изображение находится на холсте или где какая-либо из точек, я действительно просто догадываюсь о приблизительной форме, которую мне нужно сделать. Мне просто интересно, есть ли лучший способ или какая-то функция в javascript, которая может отображать местоположение изображения и дать мне хотя бы лучшее место для начала.
Вот что я знаю/попробовал уже
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function() {
// Save the state, so we can undo the clipping
context.save();
// Create a shape, of some sort
context.beginPath();
context.moveTo(somex, somey);
context.bezierCurveTo(somexstart, someystart, somexcontrol, someycontro, somexend, someyend);
context.arcTo(somecoordinates);
context.closePath();
// Clip to the current path
context.clip();
context.drawImage(img, 0, 0);
// Undo the clipping
context.restore();
}
// Specify the src to load the image
img.src = "url";
Спасибо за совет, я дам вам выстрел. Не уверен, почему я этого не делал в первую очередь – richbai90