本文介绍了一种使用HTML5 Canvas和JavaScript实现随机贝塞尔曲线的方法。通过生成随机控制点，可以绘制出不同的曲线形状，展示了如何利用数学计算和编程技巧在网页上创建动态图形。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> </body> </html>
1 var canvas = document.getElementById("canvas"); 2 var context = canvas.getContext("2d"); 3 var points=[]; 4 var numPoints=5; 5 var ctrlPoint1=[]; 6 7 for(var i=0;i<numPoints;i++){ 8 points.push({ 9 x:Math.floor(Math.random()*canvas.width), 10 y:Math.floor(Math.random()*canvas.height) 11 }) 12 } 13 14 ctrlPoint1.x=(points[0].x+points[1].x)/2; 15 ctrlPoint1.y=(points[0].y+points[1].y)/2; 16 17 18 context.beginPath(); 19 context.moveTo(points[0].x,points[1].y); 20 for(var i=1; i<numPoints-2;i++){ 21 var ctrlPoint=[]; 22 ctrlPoint.x=(points[i].x+points[i+1].x)/2; 23 ctrlPoint.y=(points[i].y+points[i+1].y)/2; 24 context.quadraticCurveTo(points[i].x,points[i].y,ctrlPoint.x,ctrlPoint.y) 25 } 26 context.stroke(); 27 context.closePath();
|
|
扫一扫
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
