javascript – 使用HTML5画布绘制草图效果

2019年8月3日 327次阅读

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

先感谢您.

最佳答案 前一阵子我向人们展示了如何在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/

点赞