当前位置:  首页  >  前端开发  >  Html5

如何用canvas绘制矩形?canvas画矩形的两种方法介绍-

canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以,如何用canvas绘制一个矩形呢?接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容,若是有需要的话可以看看。
canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以,如何用canvas绘制一个矩形呢?接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容,若是有需要的话可以看看。

我们需要知道的是在canvas中与矩形相关的方法是rect(),使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数:矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先,我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

      
      
      
      
    用canvas画矩形  
      
      
      
      
    




















    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有