绘制矩形

TIP

canvas只支持一种基本形状——矩形,所有其它形状都是通过一个或多个路径组合而成,甚至是基本的矩形也可以通过路径组合成。 更多的图形可以使用第三方插件 draw2d.js 完成。

canvas提供三个绘制矩形的方法:

  1. fillRect(x, y, width, height) 绘制一个填充的矩形
  2. strokeRect(x, y, width, height) 绘制一个矩形的边框
  3. clearRect(x, y, widh, height) 清除指定的矩形区域,然后这块区域会变的完全透明。(可以理解为一块矩形橡皮擦)

参数说明:

  • x, y:矩形的左上角的坐标。
  • width, height:绘制的矩形的宽和高。

填充的默认颜色为黑色

如:

<canvas id='fillRect'></canvas>
<canvas id='strokeRect'></canvas>
// fillRect
var fillRect = document.getElementById('fillRect');
var ctxFillRect = fillRect.getContext('2d');
ctxFillRect.fillRect(10, 10, 100, 50);
// clearRect
ctxFillRect.clearRect(15, 15, 50, 25);
// strokeRect
var strokeRect = document.getElementById('strokeRect');
var ctxStrokeRect = strokeRect.getContext('2d');
ctxStrokeRect.strokeRect(10, 10, 100, 50);

效果如下:

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress