 首页 > 教程 > canvas实现手动绘制矩形

canvas实现手动绘制矩形

时间：2024-08-15　|　来源：　|　阅读：170

话题： a VA v S C

开场白虽然在实际的开发中我们很少去绘制流程图就算需要，我们也会通过第3方插件去实现下面我们来简单实现流程图中很小的一部分手动绘制矩形绘制一个矩形的思路我们这里绘制矩形会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形 x:矩形起点的 x 轴坐标。 y:

开场白

虽然在实际的开发中我们很少去绘制流程图
就算需要，我们也会通过第3方插件去实现
下面我们来简单实现流程图中很小的一部分
手动绘制矩形

绘制一个矩形的思路

我们这里绘制矩形
会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形
x:矩形起点的 x 轴坐标。
y:矩形起点的 y 轴坐标。
width:矩形的宽度。正值在右边，负值在左边。
height:矩形的高度。正值下降，负值上升。
注意一下w,h这两个参数的正直和负值。
如果w,h是负数，会出现了2个斜着对称的矩形

canvas实现手动绘制矩形

绘制一个静态矩形




  
  
  Document

canvas实现手动绘制矩形

锟街讹拷锟斤拷锟狡撅拷锟轿的伙拷锟斤拷思路

通锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷实锟斤拷锟剿撅拷态锟斤拷锟狡撅拷锟轿★拷
锟斤拷锟斤拷锟斤拷锟斤拷锟揭拷侄锟斤拷锟揭伙拷锟斤拷锟斤拷锟�,锟斤拷要实锟斤拷锟斤拷锟铰硷拷锟斤拷锟斤拷锟斤拷
1.锟斤拷canvas注锟斤拷锟斤拷臧达拷锟斤拷录锟�,锟节帮拷锟铰碉拷时锟斤拷锟铰硷拷锟斤拷蔚锟斤拷锟绞硷拷锟斤拷锟�(x,y)
锟斤拷锟酵憋拷锟斤拷锟斤拷锟揭拷诎锟斤拷锟绞弊拷锟斤拷锟斤拷锟狡讹拷锟铰硷拷锟斤拷抬锟斤拷锟铰硷拷锟斤拷
2.锟斤拷锟斤拷锟斤拷贫锟斤拷锟绞憋拷锟酵拷锟斤拷锟斤拷锟矫碉拷锟斤拷锟轿的匡拷锟酵高★拷
锟斤拷锟斤拷锟斤拷蔚目锟斤拷群透叨锟绞憋拷锟斤拷锟斤拷锟揭癸拷镁锟斤拷锟街碉拷锟斤拷屑锟斤拷恪�
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷凭锟斤拷锟�
3.锟斤拷锟斤拷锟教э拷锟绞憋拷锟斤拷瞥锟街白拷锟斤拷锟斤拷锟斤拷贫锟斤拷录锟斤拷锟教э拷锟斤拷录锟�

锟街讹拷锟斤拷锟狡撅拷锟斤拷

canvas实现手动绘制矩形

锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷侄锟斤拷锟斤拷路锟斤拷

通锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷图片锟斤拷锟斤拷锟斤拷锟斤拷然锟斤拷锟斤拷锟街讹拷锟斤拷锟狡筹拷锟剿撅拷锟轿★拷
锟斤拷锟角筹拷锟斤拷锟斤拷锟截革拷锟斤拷路锟斤拷锟斤拷
锟斤拷锟斤拷锟饺凤拷锟斤拷一锟铰筹拷锟斤拷锟截革拷路锟斤拷锟斤拷原锟斤拷
锟斤拷锟斤拷锟斤拷每锟斤拷锟狡讹拷锟侥癸拷锟斤拷锟叫ｏ拷锟斤拷锟斤拷锟斤拷凭锟斤拷巍锟�
只要锟斤拷锟斤拷锟节伙拷锟斤拷前锟斤拷锟斤拷站锟斤拷锟斤拷遣锟斤拷蔷涂锟斤拷越锟斤拷锟斤拷锟斤拷锟斤拷锟�
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷一锟斤拷

锟节伙拷之前锟斤拷锟斤拷锟斤拷锟斤拷路锟斤拷

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)
}

canvas实现手动绘制矩形

锟斤拷锟角碉拷小锟斤拷榉拷锟斤拷锟斤拷锟斤拷耍锟�

锟斤拷些锟斤拷锟角碉拷小锟斤拷榉拷锟�:
锟斤拷锟斤拷锟斤拷锟绞硷拷锟斤拷锟斤拷锟斤拷陆锟�,锟秸碉拷锟斤拷锟斤拷锟较角★拷
锟斤拷:锟矫伙拷锟斤拷(900, 1000)锟较讹拷锟斤拷(50, 50)锟斤拷锟斤拷锟斤拷锟�
锟斤拷锟斤拷锟斤拷锟斤拷锟侥凤拷锟斤拷锟斤拷凭锟斤拷危锟斤拷遣锟斤拷腔锟斤拷锟斤拷锟斤拷锟斤拷锟截ｏ拷
确实锟斤拷锟斤拷锟斤拷锟斤拷狻�
锟斤拷时锟斤拷锟狡的撅拷锟轿诧拷锟斤拷锟斤拷锟斤拷锟斤拷锟角的凤拷锟斤拷锟斤拷谢锟斤拷啤锟斤拷肟达拷锟斤拷锟斤拷图
锟斤拷未锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟截ｏ拷
canvas实现手动绘制矩形

锟斤拷锟斤拷锟斤拷锟斤拷锟角筹拷 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实现手动绘制矩形

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)
}

canvas实现手动绘制矩形

全锟斤拷锟斤拷锟斤拷




  
  
  Document

尾锟斤拷

锟斤拷锟叫★拷锟斤拷锟斤拷锟斤拷锟叫达拷牟锟斤拷锟斤拷幕锟�
锟斤拷锟皆革拷锟揭碉拷锟斤拷锟斤拷穑扛锟叫伙拷恕锟�
锟斤拷锟斤拷锟斤拷锟斤拷写:
锟斤拷锟窖★拷芯锟斤拷危锟斤拷锟斤拷木锟斤拷未锟叫★拷锟�
锟斤拷锟斤拷诰锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷帧锟�
锟斤拷位锟斤拷锟皆诧拷锟斤拷锟酵凤拷锟斤拷诺锟�