zoukankan      html  css  js  c++  java
  • 【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别

    他们都接受相同的参数,见页面表格。唯一不同的实现方式与效果方面有差异。

    其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果,而rect()不会立即将图形画出,只有在调用了stroke()方法之后,才会实际作用于画布。

    fillRect()

    从字面上很好理解fillRect()与其他两个的区别,它是执行填充操作。填充一个矩形区域。

    下面是来自W3SHOOL中文站点对它的具体参数及API的详解:

    定义和用法

    fillRect() 方法绘制"已填色"的矩形。默认的填充颜色是黑色。

    参数

    x

    矩形左上角的 x

    y

    矩形左上角的 y

    width

    矩形的宽度,以像素

    height

    矩形的高度,以像素

    strokeRect()

    strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。

    下面看一下strokeRect() 与fillRect()的例子。

    <html>
    
    <head>
    
    <title>HTML 5 Canvas rect</title>
    
    </head>
    
    <body>
    
    <canvas id="c" width="400" height="300"></canvas>
    
    </body>
    
    <script type="text/javascript">
    
    var c = document.getElementById('c');
    
    var ctx = c.getContext('2d');
    
     
    
    // draw rectangle via strokeRect() method
    
    ctx.strokeRect(0, 0, 100, 100);
    
     
    
    // draw rectangle via fillRect() method
    
    ctx.fillRect(101, 0, 100, 100);
    
    </script>
    
    </html>

    效果:

    rect()

    rect() 方法创建矩形。但它并不会真正将矩形画出,只能调用stroke() 或 fill()后才会真正作用于画布。

    下面的例子将展示这一特性。

    <html>
    
    <head>
    
    <title>HTML 5 Canvas rect</title>
    
    </head>
    
    <body>
    
    <canvas id="c" width="400" height="300"></canvas>
    
    </body>
    
    <script type="text/javascript">
    
    var c = document.getElementById('c');
    
    var ctx = c.getContext('2d');
    
     
    
    // draw rectangle via strokeRect() method
    
    ctx.rect(0, 0, 100, 100);
    
     
    
    //set time out, the rectngle will be drawed out after 5 secs.
    
    setTimeout(function () { ctx.stroke() }, 5000)
    
    </script>
    
    </html>
    
     

    虽然执行了rect(),但只有5秒后执行了stroke()后,画布上才会出现矩形图案。

    参考:

    http://www.rgraph.net/blog/2013/january/the-difference-between-rect-strokerect-and-fillrect.html

  • 相关阅读:
    02数组基本操作
    01数组创建
    java流程控制
    assignment1
    Lecture 1: Introduction
    Lecture 14:Radial Basis Function Network
    Lecture 13:Deep Learning
    机器学习基石笔记16——机器可以怎样学得更好(4)
    机器学习基石笔记15——机器可以怎样学得更好(3)
    机器学习基石笔记14——机器可以怎样学得更好(2)
  • 原文地址:https://www.cnblogs.com/Wayou/p/html5rectdiff.html
Copyright © 2011-2022 走看看