HTML5中Canvas rect(), strokeRect() 和 fillRect() 的区别

最新推荐文章于 2023-11-25 00:15:00 发布
最新推荐文章于 2023-11-25 00:15:00 发布
阅读量7.5k 收藏 9
点赞数 2
分类专栏： web

他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。

其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。

 

fillRect()

 

从字面上很好理解fillRect()与其他两个的区别，它是执行填充操作。填充一个矩形区域。

下面是来自W3SHOOL中文站点对它的具体参数及API的详解：

定义和用法

fillRect() 方法绘制"已填色"的矩形。默认的填充颜色是黑色。

 

参数

描述

x

矩形左上角的 x 坐标

y

矩形左上角的 y 坐标

width

矩形的宽度，以像素计

height

矩形的高度，以像素计

 

strokeRect()

 

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。

下面看一下strokeRect() 与fillRect()的例子。

 

 

<html>

<head>

<title>HTML 5 Canvas rect</title>

</head>

<body>

<canvas id="c" width="400" height="300"></canvas>

</body>

<script type="text/javascript">

var c = document.getElementById('c');

var ctx = c.getContext('2d');

 

// draw rectangle via strokeRect() method

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

 

// draw rectangle via fillRect() method

ctx.fillRect(101, 0, 100, 100);

</script>

</html>

 

 

效果：

\

 

rect()

 

rect() 方法创建矩形。但它并不会真正将矩形画出，只能调用stroke() 或 fill()后才会真正作用于画布。

下面的例子将展示这一特性。

<html>

<head>

<title>HTML 5 Canvas rect</title>

</head>

<body>

<canvas id="c" width="400" height="300"></canvas>

</body>

<script type="text/javascript">

var c = document.getElementById('c');

var ctx = c.getContext('2d');

 

// draw rectangle via strokeRect() method

ctx.rect(0, 0, 100, 100);

 

//set time out, the rectngle will be drawed out after 5 secs.

setTimeout(function () { ctx.stroke() }, 5000)

</script>

</html>
虽然执行了rect(),但只有5秒后执行了stroke()后，画布上才会出现矩形图案。
sq_better
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5 canvas容器温度计特效
11-06
这个API提供了大量的方法和属性，如`fillRect`用于填充矩形，`strokeRect`用于描边矩形，`beginPath`和`closePath`用于创建路径，`arc`用于绘制圆弧，以及`moveTo`和`lineTo`用于绘制线条等。 要创建一个温度计特效...
canvas初步介绍
mh18810405067的博客
08-10 468
canvas初步介绍
前端——用Canvas绘制矩形
Searchin_R的博客
09-19 2268
CanvasRenderingContext2D提供了两个方法绘制几何图形; fillRect(double x,double y,double width,doubke height) 填充一个矩形区域 strokeRect(double x,double y,double width,double height) 绘制一个矩形边框 也就是说，CanvasRenderingC...
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8369
canvas 详解 —— 绘制篇
Canvas 绘制矩形(rect()，strokeRect()，fillRect())
houyanhua1的专栏
04-10 1866
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
canvas基础入门系列教程(4)-绘制矩形
螺钉课堂官方博客
02-12 393
2.2.绘制矩形 前面章节中我们使用三条线来画一个三角形，同理，也可以用四条线来画出一个矩形，但是这样做代码量会更多，并不推荐这样做，在canvas中提供了相应的方法来快速画出矩形。 2.2.1.strokeRect方法 strockeRect是获取到的2d环境对象上的方法，可以非常方便的画出一个矩形 //语法 ctx.strokeRect(x, y, width, height) stroke...
HTML5 Canvas柱状图表统计特效代码
03-20
在HTML中，`<canvas>`元素提供了一个画布，我们可以使用JavaScript的Canvas API在这个画布上绘制图形。这个API包含了一系列方法，如`fillRect()`、`strokeRect()`等，用于填充或描边矩形，这正是创建柱状图的基础。 ...
详解HTML5 canvas绘图基本使用方法
09-28
在canvas上绘制矩形，有三种方法：`rect()`, `fillRect()`, 和 `strokeRect()`。`rect(x, y, width, height)`定义了一个矩形路径，但不会自动填充或描边。`fillRect(x, y, width, height)`则会填充这个矩形，而`...
html5的canvas方法使用指南
09-28
矩形操作包括`rect()`、`fillRect()`、`strokeRect()`和`clearRect()`，分别用于创建矩形、填充矩形、描边矩形和清除矩形内的像素。 文本处理方面，`font`属性可设置文本的字体，`textAlign`控制文本的对齐方式，`...
HTML5 canvas基本绘图之绘制矩形
12-14
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。...绘制矩形rect()、fillRect()和strokeRect()  •context.rect( x , y , width , height )：只定义
canvas学习笔记
weixin_42119967的博客
09-06 268
canvas学习笔记 1.函数的四种调用模式 1.函数调用模式 function add( a, b) { this.result = a + b; } add( 3, 9 ); //此方法执行的时候，this指向了window console.log(result); 2.构造器调用模式 function Persion（）{ this.name = "...
HTML5- Canvas入门（二）
dcof99817的博客
08-15 96
上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。 今天我们来讲讲矩形（Rectangle）和多边形的绘制。 矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 和 ctx.strokeRect(x, y, width, height) ，参数中的 x 和 y 依旧表...
html5 rect()、fillrect()、strokeRect()的区别
u013182438的博客
03-24 9606
1.rect() 方法是单纯的画出一个矩形框 例如： canvas test your browser does not support HTML5 canvas tag! var c = document.getElementById('mytest'); var ctx = c.getContext('2d'); ctx.rect(
Canvas、Paint绘图
csdn_eric_zhao的博客
10-10 303
最近看了一些绘图相关的知识，记录一下，方便查阅。绘图常用于自定义View的情况，可以根据需求绘制出相应的图案。一、CanvasCanvas持有（holds）所有的绘制操作，简单点说，canvas就是画布，所有的绘制都要在画布上进行。绘制操作需要四个基本的组件：1.一个执行所有绘制操作的画布canvas；2.一个持有所有像素的位图bitmap(可以理解为bitmap就是铺在canvas上的像素)；3.
AWTK离线画布的应用 --- 绘制人脸框
Bingo_Nong的博客
11-29 688
awtk，实现人脸跟随框功能
canvas高级动画001：文字瀑布流
最新发布
大剑师兰特的GIS世界
11-25 391
我们经常会看到一些科技场景，01数字不断交替下移或者扩散闪现等。这里是一个示例，通过setInterval的方式，来不断的绘制文字，形成瀑布流的状态。
html5--5-5 绘制填充矩形
weixin_34061555的博客
12-05 700
html5--5-5 绘制填充矩形   学习要点 掌握绘制矩形的方法：strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充） fillRect(x,y,w,h) 绘制"被填充"的矩形 ...
【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别
weixin_34318956的博客
05-29 221
  他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。 其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。   fillRect()   从字面上很好理解fillRect()与其他两个的区别，它是执行填充操作。填充一个矩形区域。 下面是来自...
HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
weixin_34391854的博客
03-25 173
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;script type="text/javascript" src="../js/jQuery.js&
HTML5 Canvas：网页互动与动画核心技术
HTML5 Canvas API 提供了一系列的绘图方法，如 `fillRect()` 用于填充矩形，`strokeRect()` 用于描边矩形，`beginPath()` 和 `closePath()` 用于创建和闭合路径，`moveTo()` 和 `lineTo()` 用于定义线条路径，`arc()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值