折线转曲线方法

最新推荐文章于 2023-07-14 20:07:36 发布

故事迷人眼

最新推荐文章于 2023-07-14 20:07:36 发布

阅读量1.8k

点赞数

分类专栏： js

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

拿过去用直接效果

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="c" width="1000" height="1000"></canvas>

<script>
var Vector2 = function(x, y) {
this.x = x;
this.y = y;
};
Vector2.prototype = {
"length": function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
"normalize": function () {
var inv = 1 / this.length();
return new Vector2(this.x * inv, this.y * inv);
},
"add": function (v) {
return new Vector2(this.x + v.x, this.y + v.y);
},
"multiply": function (f) {
return new Vector2(this.x * f, this.y * f);
},
"dot": function (v) {
return this.x * v.x + this.y * v.y;
},
"angle": function (v) {
return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
}
};
function getControlPoint(path) {
var rt = 0.3;
var i = 0, count = path.length - 2;
var arr = [];
for (; i < count; i++) {
var a = path[i], b = path[i + 1], c = path[i + 2];
var v1 = new Vector2(a.x - b.x, a.y - b.y);
var v2 = new Vector2(c.x - b.x, c.y - b.y);
var v1Len = v1.length(), v2Len = v2.length();
var centerV = v1.normalize().add(v2.normalize()).normalize();
var ncp1 = new Vector2(centerV.y, centerV.x * -1);
var ncp2 = new Vector2(centerV.y * -1, centerV.x);
if (ncp1.angle(v1) < 90) {
var p1 = ncp1.multiply(v1Len * rt).add(b);
var p2 = ncp2.multiply(v2Len * rt).add(b);
arr.push(p1, p2)
} else {
var p1 = ncp1.multiply(v2Len * rt).add(b);
var p2 = ncp2.multiply(v1Len * rt).add(b);
arr.push(p2, p1)
}
}
return arr;
};
function drawPath(path,ctx){
var point=getControlPoint(path);
ctx.beginPath();
ctx.lineWidth=3;
ctx.strokeStyle="#cccccc";
var int=0;
for(var i =0;i<points.length;i++){
if(i==0){
ctx.moveTo(points[0].x,points[0].y);
ctx.quadraticCurveTo(point[0].x,point[0].y,points[1].x,points[1].y);
int=int+1;
}else if(i<points.length-2){
ctx.moveTo(points[i].x,points[i].y);
ctx.bezierCurveTo(point[int].x,point[int].y,point[int+1].x,point[int+1].y,points[i+1].x,points[i+1].y);
int+=2;
}else if(i==points.length-2){
ctx.moveTo(points[points.length-2].x,points[points.length-2].y);
ctx.quadraticCurveTo(point[point.length-1].x,point[point.length-1].y,points[points.length-1].x,points[points.length-1].y);
}

}
ctx.stroke();
ctx.closePath();
ctx.beginPath();

for(i =0;i<points.length;i++){
ctx.beginPath();

ctx.arc(points[i].x,points[i].y,5,0,2*Math.PI);
ctx.fillStyle="#cccccc";
ctx.fill();
ctx.closePath();
}

}
var con=document.getElementById("c").getContext("2d");
var points =[{ x: 50, y: 50 }, { x: 200, y: 100 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 370, y: 100 }, { x: 570, y: 200 }];
drawPath(points,con);

</script>
</body>
</html>

故事迷人眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
折线转曲线方法

拿过去用直接效果 Title var Vector2 = function(x, y) { this.x = x; this.y = y; }; Vector2.prototype = { "length": function () {
复制链接

扫一扫