Автор: Spread the love
Для того чтобы нарисовать дугу в html5, нужно использовать метод arc() контекста. При рисования нужно определить центральную точку, радиус, начальный и конечный угол и направление дуги по часовой или против часовой стрелки.
|
1 |
arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise) |
Рисуем дугу:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var web_canvas = document.getElementById("drawScene"); var web_context = web_canvas.getContext("2d"); var cX = 100; var cY = 200; var radius = 75; var sAngle = 1.1 * Math.PI; var eAngle = 2.5 * Math.PI; var clockwise = false; web_context.arc(cX, cY, radius, sAngle, eAngle, clockwise); web_context.lineWidth = 5; web_context.strokeStyle = "#000"; web_context.stroke(); |
Схема рисования дуги arc():
Дуги рисуются по воображаемой окружности центр воображаемой задается переменными CenterX и CenterY после задается радиус окружности в переменной radius. После задается два угла, которые определяют начальную и конечную точку дуги. Последний аргумент задает метод прорисовки дуги от начального до конечного угла — против или по часовой стрелки.
Полный текст примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Создаем дугу</title> <style type="text/css"> #drawScene { border:1px #F00 solid; margin:30px; } </style> </head> <body> <canvas id="drawScene" width="300" height="300" > </canvas> <script> function drawScene() { var web_canvas = document.getElementById("drawScene"); var web_context = web_canvas.getContext("2d"); var cX = 100; var cY = 200; var radius = 75; var sAngle = 1.1 * Math.PI; var eAngle = 2.5 * Math.PI; var clockwise = false; web_context.arc(cX, cY, radius, sAngle, eAngle, clockwise); web_context.lineWidth = 5; web_context.strokeStyle = "#000"; web_context.stroke(); } window.addEventListener("load",drawScene,true); </script> </body> </html> |
0
