Required ctx.arcTo (), two parameters are the coordinates of the control points, such as the following example:
<!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 ); // Parameter 2: Control Point 1 3,4 coordinate parameters: coordinates of the control points 2 4 parameters: arc radius ctx.arcTo ( 200 is , 50 , 200 is , 200 is , 140 ); ctx.lineTo ( 200 is , 200 is ) 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>
note:
1. ctx.arcTo () can draw two straight lines and an arc;
2. ctx.rect () can be drawn closed rectangle;
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();
