HTML5中canvas画图之画矩形和矩形掏空

不念不忘少年蓝@ 2022-08-23 05:51 197阅读 0赞

rect方法用于绘制矩形（长方形）。其语法如下:

context.rect(x，y，高度，宽度);

绘制代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绘制矩形</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300"></canvas>
    	<script type="text/javascript">
    		var canvas=document.getElementById("canvas");
    		var ctx=canvas.getContext("2d");
    		//绘制
    		ctx.fillStyle="#ff00000";
    		ctx.strokeStyle="#0000ff";
    		ctx.lineWidth=3;
    		ctx.rect(20,20,240,240);
    		ctx.fill();//填充
    		ctx.stroke();//绘制边框
    	</script>
    </body>
    </html>

![SouthEast][]

还有个函数是掏空（清空）矩形的。方法原型如下：context(x，y，w，h)。

代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绘制矩形</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300"></canvas>
    	<script type="text/javascript">
    		var canvas=document.getElementById("canvas");
    		var ctx=canvas.getContext("2d");
    		//绘制
    		ctx.fillStyle="#ff00000";
    		ctx.strokeStyle="#0000ff";
    		ctx.lineWidth=3;
    		ctx.rect(20,20,240,240);
    		ctx.fill();//填充
    		ctx.stroke();//绘制边框
    		ctx.clearRect(50,50,150,150);
    	</script>
    </body>
    </html>

截图如下:

![SouthEast 1][]

[SouthEast]: /images/20220721/136caefc3a2749e0bb54fac2d8283c73.png
[SouthEast 1]: /images/20220721/2d12688889d44620902ac31a9eb4997c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 html画三个重叠的矩形,HTML5,JavaScript和在画布中绘制多个矩形

为什么我的多个矩形不会画在画布上？ Your browser doesn't support canvas. function Shape(x, y, w, h, fill

怼烎@/ 2022年10月06日 08:59/ 0 赞/ 136 阅读

相关在html5中如何把画正方形,如何在HTML 5中使用Canvas和SVG来绘制矩形？

![e1cff51178efa0236d1f92587a083019.png][] JAROfLOvEaaa 使用SVG绘制矩形的HTML 5代码。使用画布绘制矩形的H

淩亂°似流年/ 2022年10月05日 13:00/ 0 赞/ 111 阅读

相关 HTML5中canvas画图之画矩形和矩形掏空

rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: <!DOCTYPE html> <ht

不念不忘少年蓝@/ 2022年08月23日 05:51/ 0 赞/ 198 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 196 阅读

相关 HTML5中canvas画图之根据触摸点画三角形

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了

谁借莪１个温暖的怀抱￠/ 2022年08月23日 05:50/ 0 赞/ 163 阅读

相关【html5每日练习】canvas画矩形的3个函数

前端时间，听周围的朋友和同学说html5不好学，去论坛还有各大网站看，在国内也没有真正地开始发展。也见到了专业好多哥们儿（不是计算机专业）学了一半就放弃了，我觉得也情有可原吧，

妖狐艹你老母/ 2022年06月13日 11:28/ 0 赞/ 200 阅读

相关 HTML5 Canvas 开发绘图方法整理【二、canvas直线 & canvas矩形】

开始绘制图形之前有一点需要说一下，Canvas 采用的坐标系是W3C的坐标系： X轴正方向向右; Y轴正方向向下; 所有的绘制方向都以这个为准。

红太狼/ 2022年05月31日 07:50/ 0 赞/ 518 阅读

相关 42:画矩形

总时间限制: 1000ms 内存限制: 65536kB 描述根据参数，画出矩形。输入输入一行，包括四个参数：前两个参数为整数，依次代表矩形的高和宽（高不少于

╰半夏微凉°/ 2022年04月10日 01:27/ 0 赞/ 190 阅读

相关 swift - 画图 - 画矩形，虚线，圆和半圆

![757124-20180814135422036-1922644402.png][] import UIKit c

Love The Way You Lie/ 2022年01月11日 23:51/ 0 赞/ 501 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 445 阅读