我有一个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);
将不绘制任何图像,然后它将绘制顶行像素,然后它将绘制顶部两行像素,等等.看看: