Canvas 绘制矩形(rect(),strokeRect(),fillRect())


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 画一个矩形路径:
        * ctx.rect( 起点x轴坐标,起点y轴坐标,宽,高 );
        * */
        ctx.rect( 30, 10, 50, 50 );
        ctx.stroke();  //需要手动调用 stroke()或fill()方法绘制。

        /*
        * 绘制一个描边矩形,直接绘制,不需要手动调用stroke():
        * ctx.strokeRect( 起点x轴坐标,起点y轴坐标,宽,高 )
        * */
        ctx.strokeRect( 30, 100, 50, 50 );

        /*
         * 绘制一个填充矩形,直接绘制,不需要手动调用fill():
         * ctx.fillRect( 起点x轴坐标,起点y轴坐标,宽,高 )
         * */
        ctx.fillRect( 30, 170, 50, 50 );
    </script>
</body>
</html>


### 如何使用HTML5 Canvas API绘制矩形 #### 方法一:`fillRect` 此方法用于直接绘制并填充一个矩形。指定矩形的位置(左上角坐标)、宽度和高度以及填充样式即可完成操作。 ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色 ctx.fillRect(10, 10, 150, 100); // 在画布上的 (10, 10) 处绘制宽 150px 高 100px 的矩形[^1] ``` #### 方法二:`strokeRect` 不同于 `fillRect`,该函数只描边而不填充内部区域。同样需要定义位置参数、尺寸大小,并可自定义线条的颜色和其他属性。 ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'red'; // 设定边框颜色为红色 ctx.lineWidth = 3; // 边框线宽设为 3px ctx.strokeRect(180, 10, 150, 100); // 描绘位于 (180, 10),宽高分别为 150px 和 100px 的矩形轮廓 ``` #### 方法三:路径构建方式 (`beginPath`, `rect`, `closePath`, `fill/stroke`) 这种方式更加灵活,允许先建立形状再决定是要填充还是仅勾勒边界。它还支持更复杂的图形组合与变换应用。 ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 开始新的路径 ctx.beginPath(); // 定义矩形路径起点在 (350, 10), 尺寸为 150x100 px ctx.rect(350, 10, 150, 100); // 结束当前子路径 ctx.closePath(); // 可选地填充或描边已定义好的路径 ctx.fillStyle = '#FFD700'; // 黄金色填充 ctx.fill(); // 执行填充动作 ctx.strokeStyle = 'black'; // 黑色边框 ctx.lineWidth = 2; ctx.stroke(); // 进行描边
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值