js:三种简单的矩形绘制方法（画布canvas）

之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形

三种绘制矩形的方法分别是：

rect();创建矩形路径（只生成路径）

fillRect();创建填充的矩形路径（生成路径并填充）

strokeRect();创建矩形路径并绘制（生成路径并绘制）

另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）：

clearRect()

这是之前的博客：https://blog.csdn.net/qq_52824207/article/details/124218544

这是使用lineto方法的代码（后面只给出绘制部分）：

<!DOCTYPE html>
<html><head><title>画布canvas测试</title><style>body{text-align: center;}#view{/* height: 500px;width: 500px; *//* canvas的宽度和高度设置在标签内，否则线条会变粗颜色变淡 */background-color: antiquewhite;border: 1px red solid;border-radius: 25px;}</style></head><body><h1>画布canvas测试</h1><canvas id="view" width="500px" height="500px"></canvas></body><script type="text/javascript">var conv=document.getElementById("view");var ctx=conv.getContext("2d");function drawBox(x,y,color){ctx.beginPath();//开始新的路径（丢弃当前路径）ctx.lineWidth=3;//线条宽度（单位：像素）ctx.moveTo(x,y);//起点坐标ctx.lineTo(x+100,y);//设置直线路径，终点坐标ctx.lineTo(x+100,y+100);ctx.lineTo(x,y+100);ctx.lineTo(x,y);ctx.strokeStyle="red";//设置路径颜色（先设置后绘制）ctx.stroke();//绘制路径ctx.fillStyle=color;//设置填充颜色ctx.fill();//填充路径（强制闭合）}//绘制函数drawBox(20,20,"#00FF00");</script>
</html>

使用rect方法：

ctx.beginPath();//开始新的路径
ctx.rect(20,20,100,100);//生成矩形路径，起点坐标（前两个参数）矩形大小（后两个参数）
ctx.stroke();//绘制路径

使用fillRect方法：

ctx.beginPath();//开始新路径
ctx.fillStyle="red";//默认填充黑色，通过fillStyle设置为红色
ctx.fillRect(20,20,100,100);//生成填充的矩形路径，参数同rect方法

使用strokeRect方法：

ctx.beginPath();//开始新路径
ctx.strokeRect(20,20,100,100);//设置路径并绘制，参数同前

使用clearRect方法清除矩形填充：

ctx.clearRect(20,20,50,50);//清除矩形填充,参数同前

特别说明：

1.绘制与填充：

绘制是指绘制设置好的路径，路径可以理解为无色的画笔走过，绘制沿着画笔走过的部分画上线条填充是填充内容，封闭图形才能填充，fill方法会强制封闭并填充

填充覆盖了绘制，可以先绘制后填充，但是不能先填充后绘制

2.clearRect方法只能清除已经填充的矩形区域，否则没有效果

js:三种简单的矩形绘制方法（画布canvas）相关推荐

JS三种简单排序算法
冒泡排序:最简单.最慢.长度小于7的时候最优插入排序:比冒泡要快比快速排序和希尔排序慢,数据量小的时候优势大快速排序:速度很快 //js利用systemSort进行排序 systemSort ...
怎么将音频音量进行扩大？分享三个简单好用的方法！
对于许多人来说,听音乐是一种愉悦的体验.然而,有些音乐可能声音太小,让人感到不够满意.如果你不知道如何增加音频文件的音量,那么不用担心.下面列出了三种简单易用的方法,供你选择. 方法一:记灵在线工具 ...
day01 js三种导入html的方法、js书写规范、变量的基本使用、变量提升
昨天是初学js的第一天,为什么今天才写,我觉得这样可以帮助我复习昨天的知识,加深对js的理解. 我之前学过java的,昨天转入js的学习,对js略有些体会和大家分享下,js刚入门感觉js相对于java ...
十分钟，学会使用js三种方法创建本地json数据文件
前言在干业务时,需要得到一份全国省市到街道的区划数据,刚好业务中连接了高德地图,高德地图又提供了区划的api,这下只需要把数据写到json里了.什么!你说你还不会用js创建json文件?没关系,只需 ...
Unity 基础之实现枚举（enum/Enum）遍历的三种简单方法（foreach/for）
Unity 基础之实现枚举(enum/Enum)遍历的三种简单方法目录 Unity 基础之实现枚举(enum/Enum)遍历的三种简单方法一.简单介绍二.实现原理三.效果预览四.实现 ...
c语言for循环打印九九乘法口诀的三种简单方法
c语言for循环打印九九乘法口诀的三种简单方法由于在学习c语言,今天在复习巩固知识,练习代码的时候,简单的总结了三种for循环打印九九乘法口诀的方法,加深了自己的理解.代码注释和简单的思路已经注释在 ...
SVG格式文件插入Word/WPS，三种简单快捷的方法，实现图片高清无损
最近在修改论文的时候,发现自己电脑SVG格式文件插入后一直模糊,或者出现插入不成功的情况,研究了一会后,找到了几种简单高校高效的方法,和大家分享一下- Word2019可以直接插入SVG,图片高清无损 ...
一种简单的路口网格生成方法（Unity）
一种简单的路口网格生成方法(Unity) 1. 前言 2. 思路 3. 实现 3.1 测试场景的搭建 3.2 路口中心的多边形 3.3 斑马线部分的扩展 4. 测试效果 5. 网格生成 1. 前言最 ...
GIT将本地项目上传到Github（两种简单、方便的方法）
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...

js:三种简单的矩形绘制方法（画布canvas）

js:三种简单的矩形绘制方法（画布canvas）相关推荐

最新文章

热门文章