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>

练习代码