zoukankan      html  css  js  c++  java
  • canvas学习总结六:绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。

    立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。

    Canvas的API提供了如下三个方法,分别用于矩形的清除,描边与填充

    • clearRect(x, y, w, h): 清除指定区域,使其为全透明
    • strokeRect(x, y, w, h): 绘制一个描边的矩形
    • fillRect(x, y, w, h): 绘制一个填充的矩形


    我们先来看看基于路径的绘制矩形的方法

    moveTo(), lineTo()

    function drawRect(){
      // 描边矩形
      ctx.beginPath();
      ctx.moveTo(20, 20);
      ctx.lineTo(200, 20);
      ctx.lineTo(200, 200);
      ctx.lineTo(200, 200);
      ctx.lineTo(20, 200);
      ctx.lineTo(20, 20);
      ctx.stroke();
    
      //填充矩形
      ctx.beginPath();
      ctx.moveTo(220, 20);
      ctx.lineTo(400, 20);
      ctx.lineTo(400, 200);
      ctx.lineTo(220, 200);
      ctx.lineTo(220, 200);
      ctx.lineTo(220, 20);
      ctx.fill();
    }

    rect()绘制矩形
    rect(x, y, w, h):绘制一个封闭的矩形路径
    参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高

    function drawRect(){
      ctx.beginPath();
      ctx.rect(20, 20, 180, 180);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.rect(220, 20, 180, 180);
      ctx.fill();
    }

    立即绘图函数

    strokeRect(x, y, w, h):  绘制一个描边的矩形

    参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高

    function drawRect(){
      ctx.strokeRect(20, 20, 180, 180);
    }

    fillRect(x, y, w, h): 绘制一个填充的矩形

    参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高

    function drawRect(){
        ctx.fillRect(20, 20, 180, 180);
    }

    clearRect(x, y, w, h): 清除指定区域内的所有像素
    参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高

    清除画布的方法

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    绘制圆角矩形

    在第五章中(canvas学习总结五:线段的端点与连接点)我们介绍了lineJoin属性 用来设置线的连接点的样式,因此我们可以绘制圆角矩形

    function drawRect(){
      ctx.lineWidth = 13;
      ctx.lineJoin = 'round';
      ctx.strokeRect(20, 20, 180, 180);
    }

    当然我们还可以使用lineJoin的其他属性值绘制不同方式的矩形。我们可以自己测试一下。


    总结:


    路径绘制矩形

    moveTo(), lineTo()绘制路径,stroke()与fill()进行描边与填充

    rect(x, y, w, h)顺时针绘制路径,stroke()与fill()进行描边与填充

    立即绘制矩形

    strokeRect(x, y, w, h): 绘制一个描边的矩形

    fillRect(x, y, w, h): 绘制一个填充的矩形

  • 相关阅读:
    NRF24L01 使用小结/自动应答/通道地址
    nRF24L01单片机通信的总结--看了就会用了
    彻底搞懂状态机(一段式、两段式、三段式)
    面向硬件的设计思维--时钟是电路的实际控制者
    组合逻辑电路-----竞争与冒险现象
    Win7、Win8、Win10系统USB-Blaster驱动程序无法安装的解决办法
    从DTFT到DFS,从DFS到DFT,从DFT到FFT,从一维到二维
    离散傅里叶级数DFS几个主要的特性
    离散傅里叶级数DFS
    Ubuntu12.10下Python(cx_Oracle)访问Oracle解决方案
  • 原文地址:https://www.cnblogs.com/beevesnoodles/p/7263451.html
Copyright © 2011-2022 走看看