可视化 html5 画布答案

【问题标题】：Visualizing html5 canvas可视化 html5 画布
【发布时间】：2014-04-29 09:40:56
【问题描述】：

这可能是题外话，但我不知道还有什么地方可以回答这个问题。我刚刚开始使用 HTML5 画布元素以及它可以做的所有非常强大的事情。我希望有人可以提供一些建议。在使用自定义路径和贝塞尔曲线时，可视化点在画布上的位置以达到预期效果的最简单/最佳方法是什么。现在感觉就像我只是在猜测任何地方的绘图点，希望最终得到我想要的正确角度/形状。

更具体地说，我想创建一个用作图像蒙版的形状，稍后需要为该形状设置动画。很像这个小提琴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";

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

感谢您的建议，我会试一试。不知道为什么我一开始不这样做

【解决方案2】：

试试SVG Editor。你可以在那里获得积分。您也可以添加图像。现在也使用 SVG animation。如果您有 Adobe Illustrator，则可以更轻松地在那里绘制并将其保存为 SVG。

【讨论】：