qq_烟火里的尘埃_0
2016-02-09 13:30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true); context.moveTo(400,100); context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400)); context.stroke(); function dis(x1,y1,x2,y2){ return Math.sqrt((x1-x2)*(x1-x2),(y1-y2)*(y1-y2)); } } </script> <body> <canvas id="canvas" style="margin: 50px auto ;display: block; border:1px solid black;"></canvas> </body> </html>
Math.sqrt()是返回数字的平方根,所以把22行的代码改成 return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));即可。建议你去查下两点间距离公式
Canvas绘图详解
72885 学习 · 422 问题
相似问题