《HTML5 Canvas开发详解》——2.2 基本矩形

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第2章,第2.2节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 基本矩形

首先从最简单最原始的Canvas内建的几何形状——矩形开始。在Canvas上,绘制基本矩形有3种不同的方式:填充、描边或清除。创建矩形(或者其他形状)还可以使用路径,下一节即将讲到。

实现这3种操作的API函数如下。

fillRect(x,y,width,height)

在位置(x, y)处以宽为width、高为height绘制一个填充的矩形。

strokeRect(x,y,width,height)

在位置(x, y)处以宽为width、高为height绘制一个矩形边框。它需要使用当前的strokeStyle, lineWidth, lineJoin以及miterLimit设置。

clearRect(x,y,width,height)

在位置x, y处以宽为width、高为height,清除指定区域并使其完全透明(使用透明黑作为颜色)。

在使用这些功能之前,需要预先设置好Canvas绘图时所需的填充或描边的样式。

设置这些样式最基本的方法就是使用24位的十六进制字符串。下面是第一个演示的示例。

context.fillStyle = '#000000';
context.strokeStyle = '#ff00ff';

在例2-1中,填充样式简单设为RGB黑色,描边样式设为传统的紫色,结果如图2-1所示。

例2-1 基本矩形

function drawScreen(){
   context.fillStyle = '#000000';
   context.strokeStyle = '#ff00ff';
   context.lineWidth = 2;
   context.fillRect(10,10,40,40);
   context.strokeRect(0, 0,60,60);
   context.clearRect(20,20,20,20);
}


faa5e18f19f6775c5439b96327b8b655be03d433
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值