IT. Expert System.

HTML

Line Styles


Line Styles

Using Canvas, lines are drawn using three properties: lineWidth, lineCap, and lineJoin.

Line Width

The lineWidth property controls the width of the line.

The following example shows the same line drawn with different widths:

for(i = 1; i < 10; i++) {
  c.fillStyle = "black";
  c.lineWidth = i;
  c.beginPath();
  c.moveTo(i * 10,10);
  c.lineTo(i * 10,90);
  c.stroke();
}

This code produces the following result:


Line Cap

The lineCap property controls the way the end of the line is drawn. There are three different types of caps: butt (the default), round, and square. butt draws the line end with a flat end, round draws the line end with a rounded end, and square draws the line end with a squared end that extends past the final point.

The following example shows the different line caps:

var ends = ['butt','round','square'];

for(i=0;i<3;i++) {
    c.fillStyle = "black";
    c.lineWidth = 10;
    c.lineCap = ends[i];
    c.beginPath();
    c.moveTo(20,20+20*i);
    c.lineTo(50,20+20*i+20);
    c.lineTo(80,20+20*i);
    c.stroke();
}

This code produces the following result:


Line Join

The lineJoin property controls the way line segments are joined together. There are three different types of line joins: round, bevel, and miter (the default). round draws a join with a round curve, bevel draws a join with a chopped off bevel, and miter draws a join with a straight angle.

The maximum length of the miter can be further controlled with the miterLimit property.

The following example shows the different line joins:

var joins = ['round','bevel','miter'];

for(i=0;i<3;i++) {
    c.fillStyle = "black";
    c.lineWidth = 10;
    c.lineJoin = joins[i];
    c.beginPath();
    c.moveTo(20,15+20*i);
    c.lineTo(50,15+20*i+30);
    c.lineTo(80,15+20*i);
    c.stroke();
}

This code produces the following result:

Browser Support

The following table lists the attributes / methods related to this section and their browser compatibility:

  Firefox IE Chrome Opera Safari
Attributes / Methods          
lineWidth
lineCap
lineJoin
miterLimit


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 164 / 158763828. Delta: 0.02134 с