我想绘制一条可调整大小的垂直线（基于页面内容），但它似乎是手绘的，而不是直线。
我目前正在考虑使用 SVG 或 Canvas 来实现这一点。该线将沿着我的网页的一侧延伸，因此需要在容器的顶部和底部之间可扩展。我怎样才能实现这个目标？
那么你想画一条带有抖动的线吗？
尝试绘制一堆连续的贝塞尔曲线，所有 Y 轴点部分等间距，并按一定量随机化 x 值。
下面是一个帮助您入门的示例：
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
function addJitteryBezier(fromx, fromy, tox, toy) {
var diffx = tox - fromx;
var diffy = toy - fromy;
var neg = Math.random()*diffy/5; // so the x value can go positive or negative from the typical
ctx.bezierCurveTo(
-neg + fromx + 2*(Math.random()*diffy/8), fromy + .3*diffy,
-neg + fromx + 2*(Math.random()*diffy/8), fromy + .6*diffy,
tox, toy
);
}
ctx.beginPath();
ctx.moveTo(50,0);
var i = 0;
while (i < 500) {
addJitteryBezier(50, i, 50, i+50);
i+= 50;
}
ctx.stroke();
<canvas id="canvas1" width="500" height="500"></canvas>
http://jsfiddle.net/GfGVE/9/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
