繪制簡單的直線
js代碼

function draw() {
            var ctx = document.getElementById('myCanvas').getContext('2d');/*獲取畫布*/
            for (var i = 0 ; i < 12 ; i++) {
                ctx.strokeStyle = "red"; /*設置繪制的樣式*/
                ctx.lineWidth = 1 + i;/*設置繪制線寬*/
                ctx.beginPath();/*開始繪制*/
                ctx.moveTo(5, 5 + i * 14);/*繪制的起始點坐標*/
                ctx.lineTo(140, 5 + i * 14);/*繪制的終點坐標*/
                ctx.stroke();/*開始繪制*/
            }
        }
        window.onload = function () {
            draw();
        }       

html代碼

<canvas id="myCanvas" width="300" height="200"></canvas>

效果圖：

line.png

給直線設置不同的截斷樣式
js代碼

function draw1() {
            var ctx = document.getElementById('myCanvas1').getContext('2d');
            var lineCap = ['butt', 'round', 'square'];
            // 繪制參考線
            ctx.strokeStyle = 'red';
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(10, 150);
            ctx.moveTo(150, 10);
            ctx.lineTo(150, 150);
            ctx.stroke();
            // 繪制直線段
            ctx.strokeStyle = 'green';
            for(var i = 0 ; i < lineCap.length ;i++){
                ctx.lineWidth = 20;
                ctx.lineCap = lineCap[i];/*設置截斷的樣式*/
                ctx.beginPath();
                ctx.moveTo(10, 30 + i * 50);
                ctx.lineTo(150, 30 + i * 50);
                ctx.stroke();
            }

        }
        window.onload = function () {
            draw1();
        }       

html代碼

<canvas id="myCanvas1" width="300" height="200"></canvas>

效果圖

cap.png

繪制具有不同轉角樣式（連接樣式）的折線
js 代碼

function draw2() {
            var ctx = document.getElementById('myCanvas2').getContext('2d');
            var lineJoin = ['round', 'bevel', 'miter']/*圓角 斜直角 尖角*/
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 15;
            for (var i = 0 ; i < lineJoin.length ;i++){
                ctx.lineJoin = lineJoin[i];/*設置連接點轉角樣式*/
                ctx.beginPath();
                ctx.moveTo(10+i*150,30);
                ctx.lineTo(100+i*150,30);
                ctx.lineTo(100+i*150,100);
                ctx.stroke();
            }          
       }
window.onload = function () {
            draw2();
        }  

html 代碼

<canvas id="myCanvas2" width="420" height="200"></canvas>

join.png