html5-canvas
Путь (только синтаксис)

Синтаксис

• context.beginPath ()
• context.moveTo (StartX, startY)
• context.lineTo (EndX, Endy)
• context.arc (centerX, центрY, радиус, началоRadianAngle, завершениеRadianAngle)
• context.quadraticCurveTo (controlX, controlY, EndX, Endy)
• context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, EndX, Endy)
• context.arcTo (pointX1, pointY1, pointX2, pointY2, radius)
• context.rect (leftX, topY, ширина, высота);
• context.closePath ()

Обзор основных команд рисования пути: линии и кривые

==================

TODO: привяжите каждую из приведенных ниже команд рисования к их отдельным примерам. Я не знаю, как это сделать, поскольку ссылки на отдельные примеры указывают на папку «черновик».

TODO: Добавьте примеры для этих команд «действия» этого пути: stroke (), fill (), clip ()

==================

Дорожка

Путь определяет набор линий и кривых, которые можно визуально нарисовать на холсте.

Путь автоматически не нарисован на холсте. Но линии и кривые пути могут быть нарисованы на холсте, используя узорный штрих. И форма, созданная линиями и кривыми, также может быть заполнена заполняемым стилем.

У путей есть использование, кроме рисования на холсте:

• Хит-тестирование, если координата x, y находится внутри формы пути.
• Определение области отсечения, в которой будут видны только чертежи внутри области отсечения. Любые чертежи за пределами области отсечения не будут рисоваться (== transparent) - подобно переполнению CSS.

Основные команды рисования пути:

• beginPath
• MoveTo
• LineTo
• дуга
• quadraticCurveTo
• bezierCurveTo
• аркто
• прямоугольник
• closePath

Описание основных команд рисования:

beginPath

context.beginPath()

Начинает сборку нового набора команд пути, а также отбрасывает любой ранее собранный путь.

Отбрасывание является важной и часто упускаемой точкой. Если вы не начинаете новый путь, любые ранее выданные команды пути будут автоматически перерисовываться.

Он также перемещает рисунок «перо» в верхнее левое начало холста (== координата [0,0]).

MoveTo

context.moveTo(startX, startY)

Перемещает текущее местоположение пера в координату [startX, startY].

По умолчанию все чертежи путей соединены вместе. Таким образом, конечная точка одной линии или кривой является начальной точкой следующей строки или кривой. Это может привести к созданию неожиданной линии, соединяющей два соседних чертежа. Команда context.moveTo основном «подбирает ручку рисования» и помещает ее в новую координату, поэтому линия автоматического соединения не нарисована.

LineTo

context.lineTo(endX, endY)

Рисует сегмент линии из текущего местоположения пера для координации [endX, endY]

Вы можете собрать несколько команд .lineTo для рисования полилинии. Например, вы можете собрать 3 сегмента линии, чтобы сформировать треугольник.

дуга

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Рисует круговую дугу с заданной центральной точкой, радиусом и начальным и конечным углами. Углы выражаются как радианы. Чтобы преобразовать градусы в радианы, вы можете использовать эту формулу: radians = degrees * Math.PI / 180; ,

Угол 0 обращен прямо вправо от центра дуги. Чтобы нарисовать полный круг, вы можете сделать endAngle = startAngle + 360 градусов (360 градусов == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

По умолчанию дуга рисуется по часовой стрелке. Опциональный параметр [true | false] указывает, что дуга должна быть направлена ​​против часовой стрелки: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Рисует квадратичную кривую, начиная с текущего местоположения пера до заданной конечной координаты. Другая заданная координата управления определяет форму (кривизну) кривой.

bezierCurveTo

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Рисует кубическую кривую Безье, начиная с текущего местоположения пера до заданной конечной координаты. Другие 2 заданные координаты управления определяют форму (кривизна) кривой.

аркто

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Рисует круговую дугу с заданным радиусом. Дуга вытягивается по часовой стрелке внутри клина, образованного текущим местоположением пера, и задается две точки: Point1 & Point2.

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

прямоугольник

context.rect(leftX, topY, width, height)

Рисует прямоугольник с левым верхним углом и шириной и высотой.

context.rect - уникальная команда рисования, поскольку она добавляет отключенные прямоугольники. Эти отключенные прямоугольники не связаны автоматически линиями.

closePath

context.closePath()

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

Например, если вы рисуете две линии, образующие две ноги треугольника, closePath «закрывает» треугольник, вытягивая третий отрезок треугольника от конечной точки второй ноги до начальной точки первой ноги.

Имя этой команды часто заставляет ее неправильно понимать. context.closePath НЕ является конечным разделителем context.beginPath . Опять же, команда closePath рисует строку - она ​​не «закрывает» beginPath .

lineTo (команда пути)

context.lineTo(endX, endY)

Рисует сегмент линии из текущего местоположения пера для координации [endX, endY]

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=20;
    var endX=125;
    var endY=20;

    // Draw a single line segment drawn using "moveTo" and "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Вы можете собрать несколько команд .lineTo для рисования полилинии. Например, вы можете собрать 3 сегмента линии, чтобы сформировать треугольник.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=20;
    var rightVertexX=75;
    var rightVertexY=70;
    var leftVertexX=25;
    var leftVertexY=70;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);
    ctx.lineTo(topVertexX,topVertexY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arc (команда пути)

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Рисует круговую дугу с заданной центральной точкой, радиусом и начальным и конечным углами. Углы выражаются как радианы. Чтобы преобразовать градусы в радианы, вы можете использовать эту формулу: radians = degrees * Math.PI / 180; ,

Угол 0 обращен прямо вправо от центра дуги.

По умолчанию дуга рисуется по часовой стрелке. Опциональный параметр [true | false] указывает, что дуга должна быть направлена ​​против часовой стрелки: context.arc(10,10,20,0,Math.PI*2,true)

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=Math.PI*2*;  // start at 90 degrees == centerY+radius
    var endingRadianAngle=Math.PI*2*.75;  // end at 270 degrees (==PI*2*.75 in radians)

    // A partial circle (i.e. arc) drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Чтобы нарисовать полный круг, вы можете сделать endAngle = startAngle + 360 градусов (360 градусов == Math.PI2).

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=0;       // start at 0 degrees
    var endingRadianAngle=Math.PI*2; // end at 360 degrees (==PI*2 in radians)

    // A complete circle drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

quadraticCurveTo (команда пути)

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Рисует квадратичную кривую, начиная с текущего местоположения пера до заданной конечной координаты. Другая заданная координата управления определяет форму (кривизну) кривой.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=70;
    var controlX=75;
    var controlY=25;
    var endX=125;
    var endY=70;

    // A quadratic curve drawn using "moveTo" and "quadraticCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.quadraticCurveTo(controlX,controlY,endX,endY);
    ctx.stroke();


}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

bezierCurveTo (команда пути)

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Рисует кубическую кривую Безье, начиная с текущего местоположения пера до заданной конечной координаты. Другие 2 заданные координаты управления определяют форму (кривизна) кривой.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=50;
    var controlX1=75;
    var controlY1=10;
    var controlX2=75;
    var controlY2=90;
    var endX=125;
    var endY=50;      
    
    // A cubic bezier curve drawn using "moveTo" and "bezierCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arcTo (команда пути)

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Рисует круговую дугу с заданным радиусом. Дуга вытягивается по часовой стрелке внутри клина, образованного текущим местоположением пера, и задается две точки: Point1 & Point2.

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

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var pointX0=25;
    var pointY0=80;
    var pointX1=75;
    var pointY1=0;
    var pointX2=125;
    var pointY2=80;
    var radius=25;

    // A circular arc drawn using the "arcTo" command. The line is automatically drawn.
    ctx.beginPath();
    ctx.moveTo(pointX0,pointY0);
    ctx.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

rect (команда пути)

context.rect(leftX, topY, width, height)

Рисует прямоугольник с левым верхним углом и шириной и высотой.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // A rectangle drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

context.rect - уникальная команда рисования, поскольку она добавляет отключенные прямоугольники.

Эти отключенные прямоугольники не связаны автоматически линиями.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // Multiple rectangles drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.rect(leftX+50, topY+20, width, height);
    ctx.rect(leftX+100, topY+40, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

closePath (команда пути)

context.closePath()

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

Например, если вы рисуете две линии, образующие две ноги треугольника, closePath «закрывает» треугольник, вытягивая третий отрезок треугольника от конечной точки второй ноги до начальной точки первой ноги.

Заблуждение объяснено!

Имя этой команды часто заставляет ее неправильно понимать.

context.closePath НЕ является конечным разделителем context.beginPath .

Опять же, команда closePath рисует строку - она ​​не «закрывает» beginPath.

Этот пример рисует две ноги треугольника и использует closePath чтобы завершить (закрыть ?!) треугольник, вытягивая третью ногу. То, closePath на самом деле делает closePath - это вычерчивание линии от конечной точки второй ноги до начальной точки первой ноги.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=50;
    var rightVertexX=75;
    var rightVertexY=75;
    var leftVertexX=25;
    var leftVertexY=75;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);

    // closePath draws the 3rd leg of the triangle
    ctx.closePath()

    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

beginPath (команда пути)

context.beginPath()

Начинает сборку нового набора команд пути, а также отбрасывает любой ранее собранный путь.

Он также перемещает рисунок «перо» в верхнее левое начало холста (== координата [0,0]).

Хотя необязательно, вы должны ВСЕГДА начинать путь с beginPath

Отбрасывание является важной и часто упускаемой точкой. Если вы не начинаете новый путь с beginPath , любые ранее выданные команды пути будут автоматически перерисовываться.

Эти две демоверсии пытаются нарисовать «X» с одним красным штрихом и одним синим штрихом.

Эта первая демоверсия правильно использует beginPath для запуска второго красного удара. В результате «X» правильно имеет красный и синий штрих.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    ctx.beginPath();        // Important to begin a new path! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Эта вторая демо некорректно не beginPath во втором такте. В результате «X» неправильно имеет оба красных штриха.

Второй stroke() рисует второй красный ход.

Но без второго beginPath тот же самый второй stroke() также неправильно перерисовывает первый штрих.

Поскольку второй stroke() теперь обозначен как красный, первый синий штрих перезаписывается красным штрихом с неправильной окраской.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    // Note: The necessary 'beginPath' is missing! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

lineCap (атрибут стиля пути)

context.lineCap=capStyle  // butt (default), round, square

Устанавливает стиль кепки начальных точек и конечных точек.

• butt , стиль lineCap по умолчанию, показывает квадратные кепки, которые не выходят за пределы начальных и конечных точек линии.

• раунд , показывает закругленные кепки, которые выходят за пределы начальных и конечных точек линии.

• квадрат , показывает квадратные кепки, которые выходят за пределы начальных и конечных точек линии.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineCap default: butt
    ctx.lineCap='butt';  
    drawLine(50,40,200,40);

    // lineCap: round
    ctx.lineCap='round';  
    drawLine(50,70,200,70);

    // lineCap: square
    ctx.lineCap='square';  
    drawLine(50,100,200,100);

    // utility function to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

    // For demo only,
    // Rulers to show which lineCaps extend beyond endpoints
    ctx.lineWidth=1;
    ctx.strokeStyle='red';
    drawLine(50,20,50,120);
    drawLine(200,20,200,120);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

lineJoin (атрибут стиля пути)

context.lineJoin=joinStyle  // miter (default), round, bevel

Устанавливает стиль, используемый для подключения смежных сегментов линии.

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

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineJoin: miter (default)
    ctx.lineJoin='miter';
    drawPolyline(50,30);

    // lineJoin: round
    ctx.lineJoin='round';
    drawPolyline(50,80);

    // lineJoin: bevel
    ctx.lineJoin='bevel';
    drawPolyline(50,130);

    // utility to draw polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

strokeStyle (атрибут стиля пути)

context.strokeStyle=color

Устанавливает цвет, который будет использоваться для обводки контура текущего пути.

Это параметры color (они должны быть указаны):

• CSS с именем color , например context.strokeStyle='red'

• Шестигранный цвет , например context.strokeStyle='#FF0000'

• Цвет RGB , например context.strokeStyle='rgb(red,green,blue)' где красный, зеленый и синий - целые числа 0-255, указывающие силу каждого цвета компонента.

• Цвет HSL , например context.strokeStyle='hsl(hue,saturation,lightness)' где оттенок является целым числом 0-360 на цветовом колесе, а насыщенность и легкость составляют проценты (0-100%), указывающие силу каждого компонента ,

• Цвет HSLA , например context.strokeStyle='hsl(hue,saturation,lightness,alpha)' где оттенок является целым числом 0-360 на цветовом круге, а насыщенность и легкость составляют проценты (0-100%), указывающие силу каждый компонент и альфа - это десятичное значение 0,00-1,00, указывающее непрозрачность.

Вы также можете указать эти параметры цвета (эти параметры являются объектами, созданными контекстом):

• Линейный градиент, который представляет собой объект линейного градиента, созданный с помощью context.createLinearGradient

• Радиальный градиент, который является объектом радиального градиента, созданным с помощью context.createRadialGradient

• Шаблон, который является объектом шаблона, созданным с помощью context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.strokeStyle='red';
    drawLine(50,40,250,40);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(75,75,175,75);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    drawLine(50,75,250,75);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    ctx.lineWidth=20;
    drawLine(50,110,250,110);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.strokeStyle=pattern;
        drawLine(50,150,250,150);
    }
    patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';

    // for demo only, draw labels by each stroke
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',265,40);
    ctx.fillText('Linear Gradient color',265,75);
    ctx.fillText('Radial Gradient color',265,110);
    ctx.fillText('Pattern color',265,150);

    // utility to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=425 height=200></canvas>
</body>
</html>

fillStyle (атрибут стиля пути)

context.fillStyle=color

Устанавливает цвет, который будет использоваться для заполнения внутренней части текущего пути.

Это параметры цвета (они должны быть указаны):

• CSS с именем color , например context.fillStyle='red'

• Шестигранный цвет , например context.fillStyle='#FF0000'

• Цвет RGB , например context.fillStyle='rgb(red,green,blue)' где красный, зеленый и синий - целые числа 0-255, указывающие силу каждого цвета компонента.

• Цвет HSL , например context.fillStyle='hsl(hue,saturation,lightness)' где оттенок представляет собой целое число 0-360 на цветовом круге, а насыщенность и легкость - это проценты (0-100%), указывающие силу каждого компонента ,

• Цвет HSLA , например context.fillStyle='hsl(hue,saturation,lightness,alpha)' где оттенок представляет собой целое число 0-360 на цветовом колесе, а насыщенность и легкость - это проценты (0-100%), указывающие силу каждый компонент и альфа - это десятичное значение 0,00-1,00, указывающее непрозрачность.

Вы также можете указать эти параметры цвета (эти параметры являются объектами, созданными контекстом):

• Линейный градиент, который представляет собой объект линейного градиента, созданный с помощью context.createLinearGradient

• Радиальный градиент, который является объектом радиального градиента, созданным с помощью context.createRadialGradient

• Шаблон, который является объектом шаблона, созданным с помощью context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.fillStyle='red';
    ctx.fillRect(50,50,100,50);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(225,50,300,50);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(200,50,100,50);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(50,150,100,50);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.fillStyle=pattern;
        ctx.fillRect(200,150,100,50);
    }
    patternImage.src='http://i.stack.imgur.com/ixrWe.png';

    // for demo only, draw labels by each stroke
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',100,40);
    ctx.fillText('Linear Gradient color',250,40);
    ctx.fillText('Radial Gradient color',100,140);
    ctx.fillText('Pattern color',250,140);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

lineWidth (атрибут стиля пути)

context.lineWidth=lineWidth

Устанавливает ширину линии, которая будет перемещать контур пути

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.lineWidth=1;
    drawPolyline(50,50);

    ctx.lineWidth=5;
    drawPolyline(50,100);

    ctx.lineWidth=10;
    drawPolyline(50,150);


    // utility to draw a polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (атрибуты стиля стилей)

shadowColor = color        // CSS color
shadowBlur =  width        // integer blur width
shadowOffsetX = distance   // shadow is moved horizontally by this offset
shadowOffsetY = distance   // shadow is moved vertically by this offset

Этот набор атрибутов добавит тень вокруг пути.

Как заполненные дорожки, так и поглаженные пути могут иметь тень.

Тень является самой темной (непрозрачной) по периметру пути и становится градиентно легче, поскольку она простирается от периметра пути.

• shadowColor указывает, какой цвет CSS будет использоваться для создания тени.
• shadowBlur - это расстояние, на которое тень простирается наружу от пути.
• shadowOffsetX - это расстояние, на которое тень смещается горизонтально в сторону от пути. Положительное расстояние перемещает тень вправо, отрицательное расстояние перемещает тень влево.
• shadowOffsetY - расстояние, на которое тень смещается вертикально от пути. Положительное расстояние перемещает тень вниз, отрицательное расстояние перемещает тень вверх.

О shadowOffsetX & shadowOffsetY

Важно отметить, что вся тень смещена полностью . Это заставит часть тени перемещаться под заполненными путями, и поэтому часть тени не будет видна.

О затененных штрихах

При затенении штриха, как внутри, так и снаружи хода затенены. Тень самая темная при ударе и освещает, когда тень простирается наружу в обоих направлениях от удара.

Отключение затенения при завершении

После того, как вы нарисуете свои тени, вы можете отключить теневое выделение, чтобы рисовать больше дорожек. Чтобы отключить тень, установите shadowColor прозрачным.

context.shadowColor = 'rgba(0,0,0,0)';

Требования к производительности

Тени (например, градиенты) требуют обширных вычислений, и поэтому вы должны использовать тени экономно.

Будьте особенно осторожны при анимации, потому что рисование тени много раз в секунду будет сильно влиять на производительность. Обходной путь, если вам нужно анимировать затененные пути, состоит в том, чтобы предварительно создать теневой путь на втором «теневом холсте». Тень-холст - это нормальный холст, созданный в памяти с помощью document.createElement - он не добавляется в DOM (это просто холст-постановщик). Затем нарисуйте теневой холст на основной холст. Это намного быстрее, потому что вычисления тени не нужно делать много раз в секунду. Все, что вы делаете, это копирование одного предварительно созданного холста на ваш видимый холст.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // shadowed stroke
    ctx.shadowColor='black';
    ctx.shadowBlur=6;
    ctx.strokeStyle='red';
    ctx.strokeRect(50,50,100,50);
    // darken the shadow by stroking a second time
    ctx.strokeRect(50,50,100,50);

    // shadowed fill
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.fillStyle='red';
    ctx.fillRect(225,50,100,50);
    // darken the shadow by stroking a second time
    ctx.fillRect(225,50,100,50);

    // the shadow offset rightward and downward 
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.fillStyle='red';
    ctx.fillRect(50,175,100,50);

    // a wider blur (==extends further from the path)
    ctx.shadowColor='black';
    ctx.shadowBlur=35;
    ctx.fillStyle='red';
    ctx.fillRect(225,175,100,50);

    // always clean up! Turn off shadowing
    ctx.shadowColor='rgba(0,0,0,0)';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

createLinearGradient (создает объект стилей пути)

var gradient = createLinearGradient( startX, startY, endX, endY )
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Создает многоразовый линейный градиент (объект).

Объект может быть назначен любому strokeStyle и / или fillStyle .

Затем stroke () или fill () будут окрашивать Path с цветами градиента объекта.

Создание градиентного объекта - это двухэтапный процесс:

1. Создайте сам объект градиента. Во время создания вы определяете линию на холсте, где начинается и заканчивается градиент. Объект градиента создается с помощью var gradient = context.createLinearGradient .
2. Затем добавьте 2 (или более) цвета, составляющие градиент. Это делается путем добавления нескольких цветовых остановок к градиентному объекту с gradient.addColorStop .

Аргументы:

• startX, startY - координата холста, где начинается градиент. В начальной точке (и до) холст является сплошным цветом самого низкого gradientPercentPosition .

• endX, endY - координата холста, где заканчивается градиент. В конечной точке (и после) холст является сплошным цветом самого высокого gradientPercentPosition .

• gradientPercentPosition - это число с плавающей точкой от 0,00 до 1,00, присвоенное остановке цвета. Это в основном процентная точка по линии, где применяется эта конкретная остановка цвета.

  • Градиент начинается с процента 0,00, который является [startX, startY] на холсте.
  • Градиент заканчивается в процентах 1.00, который [endX, endY] на холсте.
  • Техническое примечание . Термин «процент» не является технически правильным, поскольку значения идут от 0,00 до 1,00, а не от 0% до 100%.

• CssColor - это цвет CSS, назначенный для этой конкретной остановки цвета.

Объект градиента - это объект, который вы можете использовать (и повторно использовать!), Чтобы ваши штрихи и заливки вашего пути становились градиентными.

Сторона Примечание. Объект градиента не является внутренним элементом Canvas, а не Context. Это отдельный и многоразовый объект JavaScript, который вы можете назначить любому желаемому пути. Вы даже можете использовать этот объект для окраски Path на другом элементе Canvas (!)

Остановка цвета - это (процентные) путевые точки вдоль линии градиента. На каждой контрольной точке цветовой остановки градиент полностью (== opaquely) окрашен с назначенным цветом. Промежуточные точки вдоль линии градиента между остановками цвета окрашены как градиенты этого и предыдущего цветов.

Важный намек на градиенты холста!

Когда вы создаете объект градиента, весь холст «невидимо» заполняется этим градиентом.

Когда вы stroke() или fill() путь, невидимый градиент обнаруживается, но обнаруживается только по тому пути, который гладит или заполняется.

1. Если вы создаете линейный градиент от красного до пурпурного, как это:

    // create a linearGradient
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');
    ctx.fillStyle=gradient;
   

2. Тогда Canvas будет «невидимо» видеть ваше создание градиента следующим образом:

3. Но пока вы не нажмете stroke() или fill() градиентом, вы не увидите ни одного градиента на холсте.

4. Наконец, если вы поглаживаете или заполняете путь с помощью градиента, «невидимый» градиент становится видимым на холсте ... но только там, где вырисовывается путь.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // Create a linearGradient
    // Note: Nothing visually appears during this process
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');

    // Create a polyline path 
    // Note: Nothing visually appears during this process
    var x=20;
    var y=40;
    ctx.lineCap='round';
    ctx.lineJoin='round';
    ctx.lineWidth=15;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+30,y+50);
    ctx.lineTo(x+60,y);
    ctx.lineTo(x+90,y+50);
    ctx.lineTo(x+120,y);
    ctx.lineTo(x+150,y+50);
    ctx.lineTo(x+180,y);
    ctx.lineTo(x+210,y+50);
    ctx.lineTo(x+240,y);
    ctx.lineTo(x+270,y+50);
    ctx.lineTo(x+300,y);
    ctx.lineTo(x+330,y+50);
    ctx.lineTo(x+360,y);

    // Set the stroke style to be the gradient
    // Note: Nothing visually appears during this process
    ctx.strokeStyle=gradient;
    
    // stroke the path
    // FINALLY! The gradient-stroked path is visible on the canvas
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=150></canvas>
</body>
</html>

createRadialGradient (создает объект стиля пути)

var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Создает многоразовый радиальный градиент (объект). Объект градиента - это объект, который вы можете использовать (и повторно использовать!), Чтобы ваши штрихи и заливки вашего пути становились градиентными.

Около...

Радиальный градиент холста сильно отличается от традиционных радиальных градиентов.

«Официальное» (почти неразборчивое!) Определение радиального градиента холста находится в нижней части этой публикации. Не смотрите на это, если у вас слабое настроение!

В (почти понятных) терминах:

• Радиальный градиент имеет 2 круга: «литой» круг и круг «дисплея».
• Литейный круг подает свет в круг дисплея.
• Этот свет - это градиент.
• Форма этого градиентного света определяется относительным размером и положением обоих кругов.

Создание градиентного объекта - это двухэтапный процесс:

1. Создайте сам объект градиента. Во время создания вы определяете линию на холсте, где начинается и заканчивается градиент. Объект градиента создается с помощью var gradient = context.radialLinearGradient .
2. Затем добавьте 2 (или более) цвета, составляющие градиент. Это делается путем добавления нескольких цветовых остановок к градиентному объекту с gradient.addColorStop .

Аргументы:

• centerX1, centerY1, radius1 определяет первый круг, где будет отображаться градиент.

• centerX2, centerY2, radius2 определяет второй круг, который катит градиентный свет в первый круг.

• gradientPercentPosition - это число с плавающей точкой от 0,00 до 1,00, присвоенное остановке цвета. Это в основном процентная путевая точка, определяющая, где эта конкретная остановка цвета применяется вдоль градиента.

  • Градиент начинается с процента 0.00.
  • Градиент заканчивается в процентах 1,00.
  • Техническое примечание . Термин «процент» не является технически правильным, поскольку значения идут от 0,00 до 1,00, а не от 0% до 100%.

• CssColor - это цвет CSS, назначенный для этой конкретной остановки цвета.

Сторона Примечание. Объект градиента не является внутренним элементом Canvas, а не Context. Это отдельный и многоразовый объект JavaScript, который вы можете назначить любому желаемому пути. Вы даже можете использовать этот объект для окраски Path на другом элементе Canvas (!)

Остановка цвета - это (процентные) путевые точки вдоль линии градиента. На каждой контрольной точке цветовой остановки градиент полностью (== opaquely) окрашен с назначенным цветом. Промежуточные точки вдоль линии градиента между остановками цвета окрашены как градиенты этого и предыдущего цветов.

Важный намек на градиенты холста!

Когда вы создаете объект градиента, весь радиальный градиент «невидимо» накладывается на холст.

Когда вы stroke() или fill() путь, невидимый градиент обнаруживается, но обнаруживается только по тому пути, который гладит или заполняется.

1. Если вы создаете радиальный градиент от зеленого до красного, например:

    // create a radialGradient
    var x1=150;
    var y1=150;
    var x2=280;
    var y2=150;
    var r1=100;
    var r2=120;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
   

2. Тогда Canvas будет «невидимо» видеть ваше создание градиента следующим образом:

3. Но пока вы не нажмете stroke() или fill() градиентом, вы не увидите ни одного градиента на холсте.

4. Наконец, если вы поглаживаете или заполняете путь с помощью градиента, «невидимый» градиент становится видимым на холсте ... но только там, где вырисовывается путь.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; padding:10px; }
    #canvas{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    
    // create a radial gradient
    var x1=150;
    var y1=175;
    var x2=350;
    var y2=175;
    var r1=100;
    var r2=40;
    x2=x1;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;

    // fill a path with the gradient
    ctx.beginPath();
    ctx.moveTo(150,0);
    ctx.lineTo(300,150);
    ctx.lineTo(150,325);
    ctx.lineTo(0,150);
    ctx.lineTo(150,0);
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

Страшные официальные данные

Кто решает, что делает `createRadialGradient?

W3C выпускает официальные рекомендуемые спецификации, которые браузеры используют для создания элемента Html5 Canvas.

Спецификация W3C для createRadialGradient читается следующим образом:

Что создает createRadialGradient

createRadialGradient ... эффективно создает конус, затронутый двумя кругами, определенными при создании градиента, с частью конуса перед началом круга (0.0), используя цвет первого смещения, часть конуса после конечного круга (1.0), используя цвет последнего смещения, и области вне конуса, не затронутые градиентом (прозрачный черный).

Как это работает внутри страны?

Метод createRadialGradient(x0, y0, r0, x1, y1, r1) принимает шесть аргументов, первые три представляют начальный круг с началом (x0, y0) и радиусом r0, а последние три представляют конечный круг с началом (x1 , y1) и радиус r1. Значения находятся в единицах координатного пространства. Если любой из r0 или r1 отрицателен, необходимо вызывать исключение IndexSizeError. В противном случае метод должен возвращать радиальный CanvasGradient, инициализированный двумя указанными кружками.

Радиальные градиенты должны отображаться следующим образом:

1. Если x0 = x1 и y0 = y1 и r0 = r1, то радиальный градиент не должен ничего рисовать. Отмените эти шаги.
2. Пусть x (ω) = (x1-x0) ω + x0; Пусть y (ω) = (y1-y0) ω + y0; Пусть r (ω) = (r1-r0) ω + r0. Пусть цвет в ω будет цветом в этом положении на градиенте (с цветами, исходящими из интерполяции и экстраполяции, описанных выше).
3. Для всех значений ω, где r (ω)> 0, начиная со значения ближайшего к положительной бесконечности ω и заканчивая значением ω, ближайшим к отрицательной бесконечности, нарисуйте окружность круга с радиусом r (ω) в положении ( x (ω), y (ω)) с цветом в ω, но только рисование на участках холста, которые еще не были нарисованы более ранними кружками на этом этапе для этого рендеринга градиента.

createPattern (создает объект стилей пути)

var pattern = createPattern(imageObject,repeat)

Создает шаблон многократного использования (объект).

Объект может быть назначен любому strokeStyle и / или fillStyle .

Затем stroke () или fill () будут рисовать Path с шаблоном объекта.

Аргументы:

• imageObject - это изображение, которое будет использоваться в качестве шаблона. Источником изображения может быть:

  • HTMLImageElement --- элемент img или новый Image (),
  • HTMLCanvasElement --- элемент холста,
  • HTMLVideoElement --- элемент видео (будет захватывать текущий видеокадр)
  • ImageBitmap,
  • Blob.

• repeat определяет, как imageObject будет повторяться через холст (подобно фону CSS). Этот аргумент должен быть приведенным в кавычках и действительными значениями:

  • «repeat» --- шаблон будет горизонтально и вертикально заполнять полотно
  • «repeat-x» --- шаблон будет повторяться только горизонтально (1 горизонтальная строка)
  • «repeat-y» --- шаблон будет повторяться только вертикально (1 вертикальная строка)
  • «repeat none» --- шаблон появляется только один раз (в верхнем левом углу)

Объект шаблона - это объект, который вы можете использовать (и повторно использовать!), Чтобы сделать штрихи и заливки вашего пути узорными.

Сторона Примечание. Объект шаблона не является внутренним элементом Canvas и не является контекстом. Это отдельный и многоразовый объект JavaScript, который вы можете назначить любому желаемому пути. Вы даже можете использовать этот объект для применения шаблона к пути на другом элементе Canvas (!)

Важный намек на шаблоны Canvas!

Когда вы создаете объект шаблона, весь холст «невидимо» заполняется этим шаблоном (с учетом аргумента repeat ).

Когда вы stroke() или fill() путь, невидимый паттерн открывается, но только отображается по тому пути, который гладит или заполняется.

1. Начните с изображения, которое вы хотите использовать в качестве шаблона. Важно (!): Убедитесь, что ваше изображение полностью загружено (с использованием patternimage.onload ), прежде чем пытаться использовать его для создания вашего шаблона.

2. Вы создаете такой шаблон:

    // create a pattern
    var pattern = ctx.createPattern(patternImage,'repeat');
    ctx.fillStyle=pattern;
   

3. Тогда Canvas будет «невидимо» видеть ваше создание шаблона следующим образом:

4. Но пока вы не нажмете stroke() или fill() рисунком, вы не увидите ни одного шаблона на холсте.

5. Наконец, если вы поглаживаете или заполняете путь с помощью шаблона, «невидимый» узор становится видимым на холсте ... но только там, где этот путь рисован.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // fill using a pattern
    var patternImage=new Image();
    // IMPORTANT! 
    // Always use .onload to be sure the image has
    //     fully loaded before using it in .createPattern
    patternImage.onload=function(){
        // create a pattern object
        var pattern = ctx.createPattern(patternImage,'repeat');
        // set the fillstyle to that pattern
        ctx.fillStyle=pattern;
        // fill a rectangle with the pattern
        ctx.fillRect(50,50,150,100);
        // demo only, stroke the rect for clarity
        ctx.strokeRect(50,50,150,100);
    }
    patternImage.src='http://i.stack.imgur.com/K9EZl.png';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=325 height=250></canvas>
</body>
</html>

ход (команда пути)

context.stroke()

Позволяет погладить периметр пути в соответствии с текущим context.strokeStyle и поглаженный Путь визуально нарисованы на холст.

Перед выполнением context.stroke (или context.fill ) Path существует в памяти и еще не визуально нарисован на холсте.

Необычные штрихи

Рассмотрим этот пример Path, который рисует черную линию с 1 пикселем от [0,5] до [5,5] :

// draw a 1 pixel black line from [0,5] to [5,5]
context.strokeStyle='black';
context.lineWidth=1;
context.beginPath();
context.moveTo(0,5);
context.lineTo(5,5);
context.stroke();

Вопрос: Что браузер нарисовал на холсте?

Вероятно, вы ожидаете получить 6 черных пикселей на y = 5

Но (!) ... Холст всегда рисует штрихи на полпути по обе стороны от определенного пути!

Так как строка определена в y==5.0 Canvas хочет провести линию между y==4.5 и y==5.5

Но, опять же (!) ... Компьютерный дисплей не может рисовать полупиксели!

Итак, что делать с нежелательными полупикселями (показано синим цветом ниже)?

Ответ заключается в том, что Canvas фактически заказывает отображение для рисования линии шириной 2 пикселя от 4.0 до 6.0 . Он также окрашивает линию легче, чем определенный black . Это странное поведение рисунка - «сглаживание», и оно помогает Canvas избегать рисования штрихов, которые выглядят зубчатыми.

Корректирующий трюк, который ТОЛЬКО работает для ровных горизонтальных и вертикальных штрихов

Вы можете получить сплошную черную линию с 1 пикселем, указав линию на полупикселе:

context.moveTo(0,5.5);
context.lineto(5,5.5);

Пример кода с использованием context.stroke() для рисования положенного пути на холсте:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.lineWidth=2;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

fill (команда пути)

context.fill()

Заставляет внутреннюю часть Пути заполняться в соответствии с текущим context.fillStyle и заполненный Путь визуально нарисован на холст.

Перед выполнением context.fill (или context.stroke ) Path существует в памяти и еще не визуально нарисован на холсте.

Пример кода, используя context.fill() чтобы нарисовать заполненный Путь на холсте:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.fillStyle='blue';
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

clip (команда пути)

context.clip

Ограничивает любые будущие чертежи, отображаемые только внутри текущего Пути.

Пример: закрепите это изображение треугольным контуром

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src='http://i.stack.imgur.com/1CqWf.jpg'

    function start(){
        // draw a triangle path
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(125,100);
        ctx.lineTo(25,100);
        ctx.lineTo(75,50);
        
        // clip future drawings to appear only in the triangle
        ctx.clip();
        
        // draw an image
        ctx.drawImage(img,0,0);
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=150 height=150></canvas>
</body>
</html>