canvas——绘制矩形

最新推荐文章于 2024-08-18 10:07:21 发布

sleepwalker_1992

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量6.1k

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80569931

版权

canvas 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';

        //绘制矩形ctx.rect(x,y,w,h);
        //前两个参数表示矩形左上角的点的x,y坐标，w,h表示矩形的宽高。
        ctx.rect(100,50,100,100);
        ctx.stroke();

        //描边矩形
        ctx.strokeRect(100,200,200,100);

        //填充矩形,默认填充黑色
        ctx.fillRect(100,350,300,200);
    })();
</script>
</body>
</html>

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填充矩形</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';

        ctx.lineWidth = 12;
        //绘制矩形ctx.rect(x,y,w,h);
        //前两个参数表示矩形左上角的点的x,y坐标，w,h表示矩形的宽高。
        ctx.rect(100,50,100,100);
        ctx.strokeStyle = 'red';
        ctx.stroke();
        ctx.fillStyle = 'yellow';
        ctx.fill();

        //描边矩形,是一个空心矩形，不会被填充
        ctx.strokeStyle = 'green';
        ctx.strokeRect(100,200,200,100);
        //ctx.fill();不起作用

        //填充矩形,默认填充黑色
        ctx.beginPath();
        ctx.fillStyle = 'pink';
        ctx.fillRect(100,350,300,200);
    })();
</script>
</body>
</html>

效果：

1、快速创建矩形rect()方法

* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。

2、快速创建描边矩形和填充矩形

* 语法： ctx.strokeRect(x, y, width, height);
- 参数跟rect方法相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
- 参数跟rect方法相同，此方法执行完成后。立即对当前矩形进行fill填充。

3、清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht);

* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除矩形</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';

        //创建矩形
        ctx.lineWidth = 12;
        ctx.rect(100,50,400,400);
        ctx.strokeStyle = 'red';
        ctx.stroke();
        ctx.fillStyle = 'yellow';
        ctx.fill();

        //清除矩形
        ctx.clearRect(200,150,200,200);
    })();
</script>
</body>
</html>

效果：