专栏首页Devops专栏Canvas 绘制矩形

Canvas 绘制矩形

矩形绘制

  • rect(x,y,w,h) 没有独立路径
  • strokeRect(x,y,w,h) 有独立路径,不影响别的绘制
  • fillRect(x,y,w,h) 有独立路径,不影响别的绘制
  • clearRect(x,y,w,h) 擦除矩形区域

rect(x,y,w,h) 没有独立路径

参数图例说明:

下面来代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.rect(x0,y0,w,h); // 绘制矩形
            ctx.fillStyle = 'lightblue'; // 填充颜色
            ctx.fill();
            ctx.strokeStyle = 'gold'; // 描边
            ctx.stroke();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

可以从浏览器可以看到,已经绘制出了一个矩形,但是注意,这个方法是没有独立路径的。

什么是独立路径?

就是绘画的形状不会被其他形状覆盖。下面可以绘制多一个矩形,看看会不会覆盖,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.beginPath();
            ctx.rect(x0,y0,w,h); // 绘制矩形
            ctx.fillStyle = 'lightblue'; // 填充颜色
            ctx.fill();
            ctx.strokeStyle = 'gold'; // 描边
            ctx.stroke();

            // 绘制第二个矩形,确认是否可以覆盖第一个矩形
            x1 = 150; // 矩形起点的x
            y1 = 150; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.beginPath();
            ctx.rect(x1,y1,w,h); // 绘制矩形
            ctx.fillStyle = 'red'; // 填充颜色
            ctx.fill();
            ctx.strokeStyle = '#000'; // 描边
            ctx.stroke();


        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

strokeRect(x,y,w,h) 有独立路径,不影响别的绘制

相对于上面没有独立路径的绘制方法,strokeRect(x,y,w,h) 是有独立路径的,每个绘制都是自动带有beginpath()的属性,也就是样式是独立的。

下面来绘制两个描边矩形,看看会不会被覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.strokeRect(x0,y0,w,h); // 绘制矩形
            ctx.strokeStyle = 'gold';

            // 绘制第二个矩形,确认是否可以覆盖第一个矩形
            x1 = 150; // 矩形起点的x
            y1 = 150; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.strokeRect(x1,y1,w,h); // 绘制矩形
            ctx.strokeStyle = '#000'; 

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

fillRect(x,y,w,h) 有独立路径,不影响别的绘制

上面是绘制描边的矩形,fillRect() 是用来绘制填充的矩形的,并且也有独立路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.fillRect(x0,y0,w,h); // 绘制矩形
            ctx.fillStyle = 'gold';

            // 绘制第二个矩形,确认是否可以覆盖第一个矩形
            x1 = 150; // 矩形起点的x
            y1 = 150; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.fillRect(x1,y1,w,h); // 绘制矩形
            ctx.fillStyle = '#000'; 

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

clearRect(x,y,w,h) 擦除矩形区域

clearRect(x,y,w,h) 是像橡皮擦那样,将矩形的一部分擦拭掉,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var ctx = myCanvas.getContext('2d');

            //绘制矩形
            x0 = 100; // 矩形起点的x
            y0 = 100; // 矩形起点的y
            w = 200;  // 矩形宽度
            h = 100;  // 矩形高度
            ctx.fillRect(x0,y0,w,h); // 绘制矩形
            ctx.fillStyle = 'gold';

            // 擦拭一部分矩形
            x3 = 150;
            y3 = 150;
            w = 25;
            h = 25;
            ctx.clearRect(x3,y3,w,h);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 使用createLinearGradient绘制颜色渐变的矩形

    之前我使用遍历的方式绘制了一个线的颜色渐变,这种方式其实不好,本章节来看看使用createLinearGradient方法来设置颜色渐变。

    Devops海洋的渔夫
  • Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题

    出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢?

    Devops海洋的渔夫
  • Canvas介绍以及快速入门

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径...

    Devops海洋的渔夫
  • 第4章 类与面向对象编程第4章 类与面向对象编程

    在前面的章节中,我们学习了Kotlin的语言基础知识、类型系统等相关的知识。在本章节以及下一章中,我们将一起来学习Kotlin对面向对象编程以及函数式编程的支持...

    一个会写诗的程序员
  • 从0到1实现一个Android路由(3)——APT收集路由

    之前的例子中,关于url和Activity之间的关系,是写死在一个Map中的,可以看做是一个静态路由。随着项目规模的扩大,这样一个个的手写那张表是个工作量比较大...

    用户1108631
  • 坚持学一年很难,那坚持一周怎么样?[先行者课程-时间倒数-Data对象]

    时间是线性的,所以依附于时间的事情也是线性发展的。例如学js,谁能一下学成高手?谁有js学习秘籍?高手只能跟你装b,却不能带你起飞。 这世界我看只有砖与狗粮是真...

    web前端教室
  • 自学大数据:用以生产环境的Hadoop版本比较

    一、背景介绍 生产环境中,hadoop的版本选择是一个公司架构之时,很重要的一个考虑因素。这篇文章根据就谈谈现在主流的hadoop版本的比较。如果有不同意见,或...

    CSDN技术头条
  • Spring IoC 源码分析 (基于注解) 一

    IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。

    大王叫下
  • 面试题:Thread的start和run的区别

    原文链接:https://www.xttblog.com

    业余草
  • 基于Hadoop生态圈的数据仓库实践 —— 环境搭建(一)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1148526

扫码关注云+社区

领取腾讯云代金券