Question

这可能不是主题，但我不确定在这个问题的其他地方。我刚刚开始使用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";

Answer 1

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

Answer 2

尝试SVG Editor。你可以在那里获得积分。您也可以添加图像。现在也使用SVG animation。如果您有Adobe Illustrator，那么在那里绘制它会更容易，只需将其保存为SVG即可。

可视化html5画布

2 个答案: