Подробное объяснение свойств линий холста.

Значения: торец (значение по умолчанию), круглый, квадратный.

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;//Три метода Beginpath() рисуют три параллельные линии context.beginPath();context.moveTo(100,200);co ntext.lineTo(700,200);context.lineCap=butt;context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap=roun d;context.stroke();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap=square;context.stroke();//baselinecontext.li neWidth=1;context.strokeStyle=#27a;context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();

Когда для анимации используется закругление, закругленные углы можно нарисовать напрямую. Эффект lineCap можно использовать только в начале и конце сегмента линии, а не в месте соединения.

lineCap=square можно использовать для полного закрытия сегмента линии, когда он закрыт, но для его закрытия по-прежнему рекомендуется использоватьclothPath().

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500,350);context.lineTo(500,200);context.lineTo(700,400);context.lineTo(500,600);context.lineTo(500,450);context.lineTo(100,450);context.lineTo(100,350). );// context.closePath(); //Рекомендуется context.lineWidth=10;context.lineCap=square; //Не рекомендуется context.fillStyle=yellow;context.strokeStyle=#058context.fill();context.stroke();

Пять углов окружности делят 360° пополам, каждый угол равен 72°, 90°-72°=18°.

Углы малого круга делят пополам 72°, 18°+36°=54°.

Угол в радианы - радианы = угол*π/180, то есть (18+i*72)*Math.PI/180

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//Угол в радианах: разделите на 180*PIfor( вар i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.stroke();

Инкапсулировано в функцию:

 window.onload=function(){ var Canvas=document.getElementById(canvas); Canvas.width=800; var context=canvas.getContext(2d); context.lineWidth=10; drawStar(context, 150 300 400 400)} function drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //Угол в радианах: делим на 180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math .PI)*R+x, -Math.sin((18+i*72)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath(); ctx.stroke();}

Измените маленькие значения r=80, 200 и 400 соответственно, чтобы получить следующий рисунок.

Добавьте параметр вращения по часовой стрелке: rot

 window.onload=function(){ var Canvas=document.getElementById(canvas); Canvas.width=800; var context=canvas.getContext(2d); context.lineWidth=10; drawStar(context, 150,300,400,400,30);} //Функция угла поворота по часовой стрелке drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Угол в радианах: делим на 180*PI for(var i=0;i<5;i++){ ctx.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI); )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); ctx.closePath(); ctx.stroke();}

Эффект поворота на 30 градусов следующий:

1. Значение lineJoin

скос (по умолчанию) всегда представляет собой острый угол, скос скоса, закругленный угол

Скос напоминает эффект сложенной ленты.

2. Атрибуты miterLimit, связанные с митрой

Установите для маленького r значение 30, а для lineJoin установите скос. Эффект следующий: углы не превращаются в острые, а отображаются скошенными.

 context.lineJoin=miter;drawStar(context,30,300,400,400,30);

Почему?

Поскольку значение context.miterLimit=10 по умолчанию равно 10,

miterlimit действует только тогда, когда lineJoin имеет значение mitre.

miterLimit относится к максимальному значению расстояния между внутренними и внешними углами, возникающему , когда скос используется как способ соединения линий.

Значение по умолчанию — 10, что означает, что максимальное значение — 10 пикселей. Как только оно превысит 10 пикселей, оно будет отображаться в режиме скоса.

Когда радиус внутреннего круга r установлен на 30 выше, образующийся острый угол очень острый, а расстояние между внутренним и внешним углами превышает значение miterLimit, равное 10.

Теперь измените значение miterlimit на большее значение, до 20. Эффект следующий:

 context.lineJoin = митра; context.miterLimit = 20; drawStar (контекст, 30,300,400,400,30);

Примечание: miterLimit — это не расстояние от белого кончика до черного. Это расстояние намного больше 20 пикселей.

Когда генерируется miterLimit, линия должна иметь ширину, а острый угол средней линии линии с шириной — это прямое расстояние от внешнего острого угла.

Canvas дает значение опыта miterLimit, равное 10. Только в исключительных случаях, когда необходимо отобразить очень острые углы, необходимо изменить miterLimit.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.