Canvas路径、描边、填充

<script>

    var context = document.getElementById('canvas').getContext('2d');

    context.font = '48pt Helvetica';

    context.strokeStyle = 'blue';//边框颜色

    context.fillStyle = 'red';//填充颜色

    context.lineWidth = '2';



    //画文字

    context.strokeText('边框', 60, 110);

    context.fillText('填充', 440, 110);



    context.strokeText('边框和填充', 650, 110);

    context.fillText('边框和填充', 650, 110);

    //画矩形

    context.lineWidth = '5';

    context.beginPath();//边框 矩形

    context.rect(80, 150, 150, 100);

    context.stroke();



    context.beginPath();//填充 矩形

    context.rect(400, 150, 150, 100);

    context.fill();



    context.beginPath();//边框和填充

    context.rect(750, 150, 150, 100);

    context.stroke();

    context.fill();



    //画弧度

    context.beginPath();

    context.arc(150, 370, 60, 0, 1.5 * Math.PI);

    context.stroke();



    context.beginPath();

    context.arc(475, 370, 60, 0, Math.PI * 3 / 2);

    context.fill();



    context.beginPath();

    context.arc(820, 370, 60, 0, Math.PI * 3 / 2);

    context.stroke();

    context.fill();

    //closePath()方法创建当前点到起始点的路径

    context.beginPath();

    context.arc(150, 550, 60, 0, Math.PI * 3 / 2);

    context.closePath();

    context.stroke();



    context.beginPath();

    context.arc(475, 550, 60, 0, Math.PI * 3 / 2);

    context.closePath();

    context.fill();



    context.beginPath();

    context.arc(820, 550, 60, 0, Math.PI * 3 / 2);

    context.closePath();

    context.stroke();

    context.fill();

    //绘制三角形

    context.beginPath();

    context.moveTo(120, 650);

    context.lineTo(120, 750);

    context.lineTo(180, 750);

    context.closePath();

    context.stroke();



    context.beginPath();

    context.moveTo(450, 650);

    context.lineTo(450, 750);

    context.lineTo(510, 750);

    context.closePath();

    context.fill();



    context.beginPath();

    context.moveTo(810, 650);

    context.lineTo(810, 750);

    context.lineTo(870, 750);

    context.closePath();

    context.fill();

    context.stroke();



    context.beginPath();

    context.moveTo(120, 800);

    context.lineTo(120, 900);

    context.lineTo(180, 900);

    context.stroke();



    context.beginPath();

    context.moveTo(450, 800);

    context.lineTo(450, 900);

    context.lineTo(510, 900);

    context.fill();



    context.beginPath();

    context.moveTo(810, 800);

    context.lineTo(810, 900);

    context.lineTo(870, 900);

    context.fill();

    context.stroke();

</script>

练习代码