开场白

虽然在实际的开发中我们很少去绘制流程图

就算需要，我们也会通过第3方插件去实现

下面我们来简单实现流程图中很小的一部分

手动绘制矩形

绘制一个矩形的思路

我们这里绘制矩形

会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形

x:矩形起点的 x 轴坐标。

y:矩形起点的 y 轴坐标。

width:矩形的宽度。正值在右边，负值在左边。

height:矩形的高度。正值下降，负值上升。

注意一下w,h这两个参数的正直和负值。

如果w,h是负数，会出现了2个斜着对称的矩形

绘制一个静态矩形

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    html,body{

      /* 去除浏览器内置的margin */

      margin: 0;

      /* 整个页面铺满 */

      height: 100%;

      width: 100%;

    }

  </style>

</head>

<body>

  <canvas id="canvas"></canvas>

</body>

<script>

  // 获取canvas元素

  let canvasEle = document.getElementById('canvas')

  // 获取canvas的上下文

  const ctx = canvasEle.getContext('2d')

  // 设置canvas的大小(宽高) 与屏幕一样宽高

  const screenSize = document.documentElement

  canvasEle.width =  window.screen.availWidth

  canvasEle.height =  window.screen.availHeight

  // 给矩形的设置颜色,设置颜色一定要在绘制之前，否则将会不生效

  ctx.strokeStyle = '#a0a'

  // 绘制一个路径模式是的矩形，起始坐标100,100, 宽300，高280

  ctx.strokeRect(100,100,300,280)

</script>

</html>

手动绘制矩形的基本思路

通过上面我们实现了静态绘制矩形。

如果我们想要手动画一个矩形,需要实现以下几个步骤

1.给canvas注册鼠标按下事件,在按下的时候记录矩形的起始坐标(x,y)

与此同时，还需要在按下时注册鼠标移动事件和抬起事件。

2.在鼠标移动的时候，通过计算得到矩形的宽和高。

计算矩形的宽度和高度时，我们要使用绝对值进行计算。

计算后立即绘制矩形

3.在鼠标抬起时，移除之前注册的鼠标移动事件和抬起事件

手动绘制矩形

<script>

// 获取canvas元素 oCan

let canvasEle = document.getElementById('canvas')

// 获取canvas的上下文

const ctx = canvasEle.getContext('2d')

// 设置canvas的大小(宽高) 与屏幕一样宽高

const screenSize = document.documentElement

canvasEle.width =  window.screen.availWidth

canvasEle.height =  window.screen.availHeight

// 所有的矩形信息

let rectArr = []

// 给canvas注册事件按下事件

canvasEle.addEventListener('mousedown',canvasDownHandler)

function canvasDownHandler(e){

  console.log('按下', e)

  rectArr = [e.clientX,e.clientY ]

  // 按下的时候需要注册移动事件

  canvasEle.addEventListener('mousemove', canvasMoveHandler)

  // 抬起事件

  canvasEle.addEventListener('mouseup', canvasMouseUpHandler)

}

// 移动的时候我们需要记录起始点和结束点，然后就可以绘制矩形了

function canvasMoveHandler(e){

  console.log('我们在移动了', e)

  // 在移动的时候就开始绘制矩形

  drawRect(rectArr[0], rectArr[1], e.clientX, e.clientY)

}

function drawRect(x1,y1,x2,y2){

  // 在计算矩形的宽高时，我们需要使用绝对值来进行计算

  // 此时此刻移动的坐标减去最初按下的坐标就是矩形的宽和高

  // 如果不用绝对值，可能会出现2个矩形

  let rectWidth = Math.abs(x2-x1)

  let rectHeight = Math.abs(y2-y1)

  // 存储矩形的坐标信息

  rectArr = [x1,y1,rectWidth,rectHeight]

  ctx.strokeRect(...rectArr)

}

// 当我们鼠标抬起的时候要移除之前注册移动事件和抬起事件

function canvasMouseUpHandler(){

  canvasEle.removeEventListener('mousemove', canvasMoveHandler)

  canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)

}

</script>



发现问题出现多余的路径

通过上面这张图片，我们虽然绘制手动绘制出了矩形。

但是出现了重复的路径。

我们先分析一下出现重复路径的原因。

我们在每次移动的过程中，都会绘制矩形。

只要我们在绘制前，清空矩形是不是就可以解决这个问题

我们来尝试一下

在绘之前清除多余的路径

function drawRect(x1,y1,x2,y2){

  // 在计算矩形的宽高时，我们需要使用绝对值来进行计算

  // 此时此刻移动的坐标减去最初按下的坐标就是矩形的宽和高

  let rectWidth = Math.abs(x2-x1)

  let rectHeight = Math.abs(y2-y1)

  // 存储矩形的坐标信息

  rectArr = [x1,y1,rectWidth,rectHeight]

  // 在绘制矩形前，我们将矩形清空，然后在绘制，就不会出现多余的路径了

  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)

  // 重新绘制矩形

  ctx.strokeRect(...rectArr)

}

机智的小伙伴发现问题了？

有些机智的小伙伴发现:

如果我起始点是右下角,终点是左上角。

即:用户从(900, 1000)拖动到(50, 50)这种情况

按照这样的方向绘制矩形，是不是会出现问题呢？

确实会出现问题。

此时绘制的矩形不会随着我们的方向进行绘制。请看下面的图

如何处理这个问题呢？

主角闪亮登场 canvas.rect

canvas.rect(x,y,w,h)该方法创建一个矩形路径

x:矩形起点的 x 轴坐标。

y:矩形起点的 y 轴坐标。

width:矩形的宽度。正值在右边，负值在左边。

height:矩形的高度。正值下降，负值上升。

这个方法是创建一个矩形路径，创建的路径并不会直接绘制在画布上。

需要调用stroke()或fill()才能显示在画布上。

使用canvas.rect 绘制矩形路径

function drawRect(x1,y1,x2,y2){

  let rectWidth = Math.abs(x2-x1)

  let rectHeight = Math.abs(y2-y1)

  // 绘制之前先清空之前实时移动产生的多余的矩形路径

  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)

  // 开始画线

  ctx.beginPath();

  // 绘制路径矩形

  ctx.rect(Math.min(x1, x2), Math.min(y1, y2), rectWidth, rectHeight);

  // 绘制形状的轮廓。

  ctx.stroke();

}

canvas.strokeRect与canvas.rect的异同

区别1功能性: canvas.strokeRect:绘制的是边框。canvas.rect创建矩形的路径(不绘立即绘制在矩形上)

区别2即时性: canvas.strokeRect是立即绘制。canvas.rect不是立即绘制，需要调用stroke()或fill()才能绘制

相同点：

1.都是绘制矩形

2.接受的参数相同

3.都是通过strokeStyle(颜色)和lineWidth(线的粗细)等来设置样式

连续绘制多个矩形

function drawRect(x1,y1,x2,y2){

  let rectWidth = Math.abs(x2-x1)

  let rectHeight = Math.abs(y2-y1)

  let endX = Math.min(x1, x2)

  let endY = Math.min(y1, y2)

  // 绘制之前先清空之前实时移动产生的多余的矩形路径

  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)

  // 绘制之前那些存储在 beforeRectArr 数组中的矩形

  allRectInfoArr = [endX, endY, rectWidth, rectHeight]

  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)

  beforeRectArr.forEach(element => {

    ctx.beginPath();

    ctx.strokeRect(...element)

    ctx.stroke();

  });

  // 开始本次路径

  ctx.beginPath();

  // 绘制本次的矩形路径

  ctx.rect(...allRectInfoArr);

  // 开始填充矩形

  ctx.stroke();

}

// 当我们鼠标抬起的时候要移除之前注册移动事件和抬起事件

function canvasMouseUpHandler(){

  savaBeforeRect()

  canvasEle.removeEventListener('mousemove', canvasMoveHandler)

  canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)

}

function savaBeforeRect(){

  beforeRectArr.push(allRectInfoArr)

}

全部代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    html,body{

      /* 去除浏览器内置的margin */

      margin: 0;

      /* 整个页面铺满 */

      height: 100%;

      width: 100%;

    }

  </style>

</head>

<body>

  <canvas id="canvas"></canvas>

</body>

<script>

  // 获取canvas元素 oCan

  let canvasEle = document.getElementById('canvas')

  // 获取canvas的上下文

  const ctx = canvasEle.getContext('2d')

  // 设置canvas的大小(宽高) 与屏幕一样宽高

  const screenSize = document.documentElement

  canvasEle.width =  window.screen.availWidth

  canvasEle.height =  window.screen.availHeight

  // 给矩形的设置颜色

  // ctx.strokeStyle = '#a0a'

  // // 绘制一个路径模式是的矩形，起始坐标100,100, 宽300，高280

  // ctx.strokeRect(100,100,400,280)

  // 矩形信息

  let rectArr = []

  // 所有的矩形信息

  allRectInfoArr = []

  let beforeRectArr =[]

  // 给canvas注册事件按下事件

  canvasEle.addEventListener('mousedown',canvasDownHandler)

  function canvasDownHandler(e){

    rectArr = [e.clientX,e.clientY ]

    // 按下的时候需要注册移动事件

    canvasEle.addEventListener('mousemove', canvasMoveHandler)

    // 抬起事件

    canvasEle.addEventListener('mouseup', canvasMouseUpHandler)

  }

  // 移动的时候我们需要记录起始点和结束点，然后就可以绘制矩形了

  function canvasMoveHandler(e){

    // 在移动的时候就开始绘制矩形

    drawRect(rectArr[0], rectArr[1], e.clientX, e.clientY)

  }

  function drawRect(x1,y1,x2,y2){

    let rectWidth = Math.abs(x2-x1)

    let rectHeight = Math.abs(y2-y1)

    let endX = Math.min(x1, x2)

    let endY = Math.min(y1, y2)

    // 绘制之前先清空之前实时移动产生的多余的矩形路径

    ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)

    // 绘制之前那些存储在 beforeRectArr 数组中的矩形

    allRectInfoArr = [endX, endY, rectWidth, rectHeight]

    beforeRectArr.forEach(element => {

      ctx.beginPath();

      ctx.strokeRect(...element)

      ctx.stroke();

    });

    // 开始本次路径

    ctx.beginPath();

    // 绘制本次的矩形路径

    ctx.rect(...allRectInfoArr);

    // 开始填充矩形

    ctx.stroke();

  }

  // 当我们鼠标抬起的时候要移除之前注册移动事件和抬起事件

  function canvasMouseUpHandler(){

    savaBeforeRect()

    canvasEle.removeEventListener('mousemove', canvasMoveHandler)

    canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)

  }

  function savaBeforeRect(){

    beforeRectArr.push(allRectInfoArr)

  }

</script>

</html>

尾声

如果小伙伴觉得我写的不错的话

可以给我点个赞吗？感谢了。

后面会继续写:

如何选中矩形，更改矩形大小。

如何在矩形上添加文字。

如何绘制圆，箭头符号等

canvas实现手动绘制矩形的更多相关文章

  1. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  2. canvas 绘制 矩形 圆形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  5. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  6. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  7. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  8. Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  9. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  10. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

随机推荐

  1. MYSQL8存储过程生成日历表以及异常处理

    一.环境 数据库:mysql8.0.25 社区版 操作系统:windows 11 ------------------------------------ 二.创建日历表 CREATE TABLE ` ...

  2. SpringMVC原理（1）-文件上传请求

    我们文件上传接口只需要在方法参数上写MultipartFile类,mvc就可以帮我们把上传的文件封装为这个类的对 象供我们非常方便的操作,那它是怎么做的呢?我们一起来看看 我们发的请求默认都是由Dis ...

  3. supervisor 安装和基本使用

    安装 yum install supervisor touch /var/run/supervisor/supervisor.sock chmod 777 /var/run/supervisor/su ...

  4. java生成word的解决方案比较

    1.Jacob Jacob是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建一座桥梁.通过Jacob实现了在Java平台上对微软Office的COM接口进行调用. 优点:调 ...

  5. Vue源码剖析

    目录 Vue 响应式数据 Vue 中如何进行依赖收集 Vue 中模板编译原理 Vue 生命周期钩子 Vue 组件 data 为什么必须是个函数? nextTick 原理 set 方法实现原理 虚拟 d ...

  6. char字符_C

    字符的表示  字符类型由单引号' '包围,字符串由双引号" "包围. //正确的写法 char a = '1'; char b = '$'; char c = 'X'; char ...

  7. CF 1927

    G link 定义\({{dp_i}_j}_k\)为考虑完第i个点,最左边没有染色的点为\(j\),最右边没有染色的点为\(k\)的最小数量. 考虑转移(用自己更新别人) 如果不用\(i\),直接转移 ...

  8. CCF 任务调度

    样例的示意图 查了一圈,然后很烦,不想学习方法,好卡.查了一些题解,发现都是10分,30分先搁置的博客,最后翻到 堪称官方标称的思路 (CCF题目pat题目各大poj/hdoj好戏那个都没有标程,这里 ...

  9. Scratch全套Q版三国人物角色素材包免费下载

    全新Q版三国人物角色素材包,内含142张细腻可爱的Q版风格图片,涵盖三国名将.士兵.场景等丰富元素,为scratch爱好者提供多样选择,适合各类三国主题创作. 免费下载:www.xiaohujing. ...

  10. Jmeter函数助手30-groovy

    groovy函数用于脚本执行. 表达式评估:填入Apache Groovy脚本(不是文件名).本身包含逗号的参数值应根据需要进行转义'\,' 存储结果的变量名(可选) 1.引用变量进行截取字符处理 $ ...