canvas-quadraticCurveTo 

<!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();

||

 

posted @ 2018-10-16 19:11  johnhery  阅读(404)  评论(0)  编辑  收藏  举报