javascript - 可视化 html5 Canvas

Question

这可能偏离主题，但我不知道还能从哪里回答这个问题。我刚刚开始使用 HTML5 canvas 元素以及它可以完成的所有令人难以置信的强大功能。我希望有人可以提供一些建议。使用自定义路径和贝塞尔曲线时，可视化点在 Canvas 上所属位置以实现所需效果的最简单/最佳方法是什么。现在感觉就像我只是在任何地方猜测绘图点，希望最终得到我想要的正确 Angular/形状。

更具体地说，我想创建一个充当图像蒙版的形状，稍后需要为该形状设置动画。很像这个 fiddle http://jsfiddle.net/jimrhoskins/dDUC3/1/ (其他人的作品)但由于我看不到图片在 Canvas 上的位置或任何点的位置，所以我实际上只是猜测我需要制作的大致形状。我只是想知道是否有更好的方法，或者 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";

Answer 1

如何在 SVG 编辑器中打开图像。在图像上方的图层上绘制路径。然后打开SVG并复制坐标？