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>

练习代码

Canvas路径、描边、填充,布布扣,bubuko.com