HTML5 Canvas - Графический пример кода + диаграмма эффекта для рисования дуг и вращения

Комментарий: Прежде чем выполнять операцию вращения, вы должны понимать одно предложение: вращение - это система координат холста, а не сама фигура. Во -первых, давайте поймем координаты круга: центр, угол исходного угла, угол конечности; Следующий очень прост

Во -первых, давайте поймем координаты круга:

<script language = "javascript">

var cxt = document.getElementbyId ('demo'). getContext ("2d");

cxt.beginpath ();

cxt.arc (100 100,50, математика. Pi*0,75, Math.pi*1,75, false);/*Нарисуйте полукруглую дугу с центральной координатой 100 100; начальный радиан составляет 0,75, конечный радиан - 1,75, последний параметр false = по часовой стрелке, true = против часовой стрелки, конечно, этот параметр не является обязательным*/

cxt.fillstyle = "#f00";/*Выберите цвет для использования*/

cxt.fill ();/*один шаг, чтобы действительно нарисовать фигуру на холсте, нарисуйте первый полукруга*//

/*Предпочитаю нарисовать второй полукруга*/

cxt.beginpath ();

cxt.ARC (170,100,50, Math.pi*1,25, Math.pi*0,25, false);

cxt.fillstyle = "#F00";

cxt.fill ();/*Нарисуйте нарисованную графику на холсте*/

cxt.beginpath ();

/*Поверните холст по часовой стрелке на 45 градусов. Параметр функции вращения - радиан, поэтому вам нужно преобразовать его */

cxt.rotate (45*math.pi/180);

CXT.FillRect (141.1, -50,100 100);/*Начальная координата составляет 141,1, -50, а ширина и высота 100*/

cxt.fillstyle = "#F00";

cxt.fill ();

cxt.beginpath ();

/*Поверните холст под нормальный угол*/

cxt.rotate (-45*math.pi/180);

cxt.font = "60px microsoft yahei";

cxt.strokestyle = "#f00";

cxt.stroketext ("I Love Html5", 0,300);/*Два параметра, первое-начать рисовать координаты оси x текста, а второе-начать рисовать Y-координату текста*//

cxt.Stroke ();

/*Создать градиент*/

var grd = cxt.createLinearGradient (0,45,175,50);/*Четыре параметра являются градиентной начальной точкой x, y градиент конечная точка x, y*/

grd.addcolorstop (0, "#ff0000");

grd.addcolorstop (0,25, "#ffff00");

grd.addcolorstop (0,5, "#00ff00");

grd.addcolorstop (0,75, "#00ffff");

grd.addcolorstop (1, "#ffff00");

cxt.strokestyle = grd;

cxt.stroketext ("I Love Canvas", 0,400);/*Два параметра, первое-начать рисовать координаты оси x текста, а второе-начать рисовать Y-координату текста*/

cxt.Stroke ();

</script>

Изображение воспроизведения: