如何使用svg / canvas绘制不规则/手绘线？ [英] How to draw an irregular/hand-drawn line using svg/canvas?

问题描述

我想绘制一条可调整大小的垂直线（基于页面内容），但它似乎是手绘而不是直线。

我目前正在想使用SVG或Canvas来实现这一点。该行将沿着我的网页的侧面，因此需要在容器的顶部和底部之间进行扩展。

感谢

解决方案

所以你想画一条有抖动的线？

尝试绘制一堆连续的贝塞尔曲线，所有的Y轴点部分均匀分布，然后随机化

http://jsfiddle.net/GfGVE/9/

I want to draw a vertical line that is resizeable (based on the page content), but that appears to be hand drawn, rather than straight.

I'm currently thinking of using SVG or Canvas to achieve this. The line will run down the side of my webpage, hence needs to be scalable between the top and bottom of the container. What would be the best way to achieve this?

Thanks

解决方案

So you want to draw a line with jitter?

Try drawing a bunch of successive bezier curves, with all of the Y-axis point parts equally spaced, and randomize the x values by some amount.

Here's an example to get you started:

http://jsfiddle.net/GfGVE/9/

这篇关于如何使用svg / canvas绘制不规则/手绘线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！