黑马程序员技术交流社区

标题: 【济南校区】前端就业班笔记Canvas（三）：绘制矩形 [打印本页]

---

作者: 小鲁哥哥    时间: 2018-5-11 13:10
标题: 【济南校区】前端就业班笔记Canvas（三）：绘制矩形

【济南校区】前端就业班笔记Canvas（三）

绘制形状

绘制图形不仅仅是利用线条来实现绘图, 还可以有快捷的绘制图形的办法

• 绘制矩形
• 绘制圆弧
  
  

绘制矩形

绘制矩形的方法

• CanvasRenderingContext2D.strokeRect
• CanvasRenderingContext2D.fillRect
• CanvasRenderingContext2D.rect
  

注意: rect 方法就是矩形路径, 还需要使用 fill 或 stroke 才可以看到效果. 因此一般使用 strokeRect 或 fillRect 直接可以看到结果.

清除矩形区域

• CanvasRenderingContext2D.clearRect
  
  

绘制矩形框

语法: CanvasRenderingContext2D.strokeRect( x, y, width. height )

描述:

• 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
• 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
• 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
• 绘制的矩形支持 strokeStyle 设置颜色样式.
  
  

案例

[JavaScript] 纯文本查看 复制代码

    ctx.strokeStyle = 'red';  

   ctx.strokeRect( 100, 100, 200, 100 );

效果

绘制填充矩形

语法: CanvasRenderingContext2D.fillRect( x, y, width. height )

描述:

• 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
• 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
• 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
• 绘制的矩形支持 fillStyle 设置颜色样式.
  
  

案例

[JavaScript] 纯文本查看 复制代码

           ctx.fillStyle = 'green';    

           ctx.fillRect( 100, 100, 200, 100 );

效果

清除矩形区域

语法: CanvasRenderingContext2D.clearRect( x, y, width, height )

描述:

• 用于清除画布中的矩形区域的内容.
• 参数 x, y 表示矩形区域左上角的坐标, width 与 height 表示矩形区域的宽高.
  
  

案例

[JavaScript] 纯文本查看 复制代码

        ctx.fillRect( 100, 100, 200, 100 );    

        ctx.clearRect( 110, 110, 50, 50 );

效果

案例

利用绘制图形与清除矩形区域, 可以实现简单的动画. 例如代码:

[JavaScript] 纯文本查看 复制代码

    var x = 10, y = 10, oldx = 10, oldy = 10;

    var width = 100, height = 50;     
    var intervalId = setInterval(function () {
        ctx.clearRect( oldx - 1, oldy - 1, width + 2, height + 2 );
        ctx.strokeRect( x, y, width, height );
        oldx = x;
        oldy = y;
        x += 4;
        y += 2;
        if ( oldy >= 200 ) {
            // clearInterval( intervalId );
            x = 10, y = 10;
        }
    }, 20);

简单效果

有时为了简单常常将整个画布都清除, 这样就不用每次计算清除的问题.

[JavaScript] 纯文本查看 复制代码

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

    // 也可以设置画布宽度, 这样就会自动清除

    cas.width = cas.width;

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2