<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canv" width="300" height="300"></canvas> <script> function draw() { var canvas = document.getElementById('canv'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); //参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径 ctx.arcTo(200, 50, 200, 200, 140); ctx.lineTo(200, 200) ctx.stroke(); // 绘制控制点 ctx.beginPath(); ctx.rect(50, 50, 5, 5); ctx.rect(200, 50, 5, 5) ctx.rect(200, 200, 5, 5) ctx.fill(); } draw(); </script> </body> </html> 
注意:
1. ctx.arcTo() 可以绘制与两条直线相切的圆弧;
2.
function draw() { var canvas = document.getElementById('canv'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(100, 100, 100, 50); ctx.stroke(); } draw(); 
来源：博客园
作者：aisowe
链接：https://www.cnblogs.com/aisowe/p/11571801.html