Для того чтобы нарисовать дугу в html5, нужно использовать метод arc() контекста. При рисования нужно определить центральную точку, радиус, начальный и конечный угол и направление дуги по часовой или против часовой стрелки.
arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise)
Рисуем дугу:
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. После задается два угла, которые определяют начальную и конечную точку дуги. Последний аргумент задает метод прорисовки дуги от начального до конечного угла - против или по часовой стрелки.
Полный текст примера:
<!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>
