06绘制矩形

作者: 夜幕小草 | 来源:发表于2016-12-07 23:15 被阅读10次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制矩形</title>
</head>
<body style="padding: 100px;">
  <canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>
<script>
     // 1. 获取标签
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // 2. 绘制矩形 - 方式一
    ctx.rect(100, 100, 200, 200);

    // 绘制
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 10;
    ctx.stroke();
    // 填充
    ctx.fillStyle = 'blue';
    ctx.fill();

    // 3.绘制矩形 - 方式二
    ctx.beginPath();

    ctx.fillStyle = 'pink';
    ctx.strokeStyle = 'yellow';
    ctx.lineWidth = 15;

    ctx.fillRect(400, 200, 200, 100);
    ctx.strokeRect(400, 200, 200, 100);


    // 4. 清除矩形
    ctx.beginPath();
    ctx.clearRect(400, 200, 90, 90);

    // 5.清屏
//    ctx.clearRect(0, 0, canvas.width, canvas.height);

</script>
</body>
</html>