Question

我有一个JPEG图像，包含一个城市的手绘草图轮廓。我想实现一个缓慢的草图效果，从左到右在空白区域绘制这些轮廓。如何基于HTML5 canvas元素执行此操作？有点像将JPEG导入到画布中，在其上应用一些动画蒙版，或者将JPEG重新分解为一组曲线（如果有可能我想得到一个合适的工具列表）并使用simple-stupid ctx.lineTo（...）和其他曲线函数。

提前谢谢你。

Answer 1

前段时间我正在向某人展示如何在Canvas上制作动画手绘线条的效果。绘图技术每帧只画了一点图像，这似乎与你想要的几乎相同。换句话说：

var amount = 1;
function drawMore() {
    ctx.clearRect(0,0,can.width, can.height);
    ctx.drawImage(can2, 0, 0, can.width, amount, 0, 0, can.width, amount);
    amount++;
}
setInterval(drawMore, 90);

将不绘制任何图像，然后它将绘制顶行像素，然后它将绘制前两行像素，等等。看看：

http://jsfiddle.net/GfGVE/28/

使用HTML5画布绘制草图效果

1 个答案: