Context绘制直线和折线

绘制简单的直线
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