生成效果:
JS源码:
$(function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.lineWidth = 2;
context.strokeStyle = "#1230ff";
FT({x:300,y:800},{x:300,y:650},31*Math.PI/36,23*Math.PI/18)
FT({x:700,y:800},{x:700,y:500},31*Math.PI/36,23*Math.PI/18)
function FT(po1,po2,angle1,angle2) { //注意!po1,po2,有方向,要按照一定的方向传参
if(Math.abs(po1.y-po2.y)<5){ //设置中止函数
return;
}
//核心算法,注意加上var,防止全局变量干扰,好习惯
var x0=(2*po1.x+po2.x)/3;
var y0=(2*po1.y+po2.y)/3;
//按照坐标旋转公式求算x2,y2
var x1=(x0-po2.x)*Math.cos(angle1)-(y0-po2.y)*Math.sin(angle1)+po2.x;
var y1=(x0-po2.x)*Math.sin(angle1)+(y0-po2.y)*Math.cos(angle1)+po2.y;
var x2=(x0-po2.x)*Math.cos(angle2)-(y0-po2.y)*Math.sin(angle2)+po2.x;
var y2=(x0-po2.x)*Math.sin(angle2)+(y0-po2.y)*Math.cos(angle2)+po2.y;
//核心算法
draw([po1,po2,{x:x1,y:y1},{x:x2,y:y2}]);
FT(po2,{x:x1,y:y1},31*Math.PI/36,23*Math.PI/18)
FT(po2,{x:x2,y:y2},31*Math.PI/36,23*Math.PI/18)
}
function draw(points) {
context.beginPath() //加上这句重新绘制,接口文档是最好的资料!
num=points.length;
for(i=0;i<num-1;i++){
context.lineTo(points[i].x,points[i].y);
context.moveTo(points[i].x,points[i].y)
}
context.moveTo(points[num-3].x,points[num-3].y);
context.lineTo(points[num-1].x,points[num-1].y);
context.closePath()
context.stroke()
}
})