Canvas - arc, рисуем дуги


Canvas - arc, рисуем дуги.

Для того чтобы нарисовать дугу в html5, нужно использовать метод arc() контекста. При рисования нужно определить центральную точку, радиус, начальный и конечный угол и направление дуги по часовой или против часовой стрелки.

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():

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>

 

 

Теги