canvas實(shí)現(xiàn)手動(dòng)繪制矩形

開場(chǎng)白

雖然在實(shí)際的開發(fā)中我們很少去繪制流程圖
就算需要，我們也會(huì)通過(guò)第3方插件去實(shí)現(xiàn)
下面我們來(lái)簡(jiǎn)單實(shí)現(xiàn)流程圖中很小的一部分
手動(dòng)繪制矩形

繪制一個(gè)矩形的思路

我們這里繪制矩形
會(huì)使用到canvas.strokeRect(x,y, w, h)方法繪制一個(gè)描邊矩形
x:矩形起點(diǎn)的 x 軸坐標(biāo)。
y:矩形起點(diǎn)的 y 軸坐標(biāo)。
width:矩形的寬度。正值在右邊，負(fù)值在左邊。
height:矩形的高度。正值下降，負(fù)值上升。
注意一下w,h這兩個(gè)參數(shù)的正直和負(fù)值。
如果w,h是負(fù)數(shù)，會(huì)出現(xiàn)了2個(gè)斜著對(duì)稱的矩形

繪制一個(gè)靜態(tài)矩形

錕街訛拷錕斤拷錕狡撅拷錕轎的伙拷錕斤拷思路

通錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷實(shí)錕斤拷錕剿撅拷態(tài)錕斤拷錕狡撅拷錕轎★拷
錕斤拷錕斤拷錕斤拷錕斤拷錕揭�锟街跺K斤拷錕揭伙拷錕斤拷錕斤拷錕?錕斤拷要實(shí)錕斤拷錕斤拷錕鉸鹼拷錕斤拷錕斤拷錕斤拷
1.錕斤拷canvas注錕斤拷錕斤拷臧達(dá)拷錕斤拷錄錕?錕節(jié)幫拷錕鉸碉拷時(shí)錕斤拷錕鉸鹼拷錕斤拷蔚錕斤拷錕絞鹼拷錕斤拷錕?x,y)
錕斤拷錕酵�时锟藉K斤拷錕斤拷錕揭�锟皆x錕斤拷錕絞弊�锟藉K斤拷錕斤拷錕狡訛拷錕鉸鹼拷錕斤拷抬錕斤拷錕鉸鹼拷錕斤拷
2.錕斤拷錕斤拷錕斤拷貧錕斤拷錕絞憋拷錕酵�锟藉K斤拷錕斤拷錕矯碉拷錕斤拷錕轎的匡拷錕酵高★拷
錕斤拷錕斤拷錕斤拷蔚目錕斤拷群透叨錕絞憋拷錕斤拷錕斤拷錕揭�使锟芥V錕斤拷錕街碉拷錕斤拷屑錕斤拷恪?
錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷憑錕斤拷錕?
3.錕斤拷錕斤拷錕教э拷錕絞憋拷錕斤拷瞥錕街�前注锟藉K斤拷錕斤拷錕斤拷貧錕斤拷錄錕斤拷錕教э拷錕斤拷錄錕?

錕街訛拷錕斤拷錕狡撅拷錕斤拷

錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷侄錕斤拷錕斤拷路錕斤拷

通錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷圖片錕斤拷錕斤拷錕斤拷錕斤拷然錕斤拷錕斤拷錕街訛拷錕斤拷錕狡籌拷錕剿撅拷錕轎★拷
錕斤拷錕角籌拷錕斤拷錕斤拷錕截革拷錕斤拷路錕斤拷錕斤拷
錕斤拷錕斤拷錕餃鳳拷錕斤拷一錕鉸籌拷錕斤拷錕截革拷路錕斤拷錕斤拷原錕斤拷
錕斤拷錕斤拷錕斤拷每錕斤拷錕狡訛拷錕僥癸拷錕斤拷錕叫ｏ拷錕斤拷錕斤拷錕斤拷憑錕斤拷巍錕?
只要錕斤拷錕斤拷錕節(jié)伙拷錕斤拷前錕斤拷錕斤拷站錕斤拷錕斤拷遣錕斤拷薔涂錕斤拷越錕斤拷錕斤拷錕斤拷錕斤拷錕?
錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷一錕斤拷

錕節(jié)伙拷之前錕斤拷錕斤拷錕斤拷錕斤拷路錕斤拷

function drawRect(x1,y1,x2,y2){
  // 錕節(jié)鹼拷錕斤拷錕斤拷蔚目錕斤拷錕絞憋拷錕斤拷錕斤拷錕斤拷錕揭�使锟芥V錕斤拷錕街碉拷錕斤拷錕斤拷屑錕斤拷錕?  // 錕斤拷時(shí)錕剿匡拷錕狡訛拷錕斤拷錕斤拷錕斤拷錕餃ワ拷錕斤拷錕斤拷錕鉸碉拷錕斤拷錕斤拷錕斤拷薔錕斤拷蔚目錕斤拷透錕?  let rectWidth = Math.abs(x2-x1)
  let rectHeight = Math.abs(y2-y1)
  // 錕芥儲(chǔ)錕斤拷錕轎碉拷錕斤拷錕斤拷錕斤拷息
  rectArr = [x1,y1,rectWidth,rectHeight]
  // 錕節(jié)伙拷錕狡撅拷錕斤拷前錕斤拷錕斤拷錕角斤拷錕斤拷錕斤拷錕斤拷眨錕餃伙拷錕斤拷諢錕斤拷疲錕斤拷筒錕斤拷錕斤拷錕街訛拷錕斤拷錕鉸鳳拷錕斤拷錕?  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)
  // 錕斤拷錕鉸伙拷錕狡撅拷錕斤拷
  ctx.strokeRect(...rectArr)
}

錕斤拷錕角碉拷小錕斤拷櫸�锟藉K斤拷錕斤拷錕斤拷耍錕?

錕斤拷些錕斤拷錕角碉拷小錕斤拷櫸�锟藉K?
錕斤拷錕斤拷錕斤拷錕絞鹼拷錕斤拷錕斤拷錕斤拷陸錕?錕秸碉拷錕斤拷錕斤拷錕較角★拷
錕斤拷:錕矯伙拷錕斤拷(900, 1000)錕較訛拷錕斤拷(50, 50)錕斤拷錕斤拷錕斤拷錕?
錕斤拷錕斤拷錕斤拷錕斤拷錕僥鳳拷錕斤拷錕斤拷憑錕斤拷危錕斤拷遣錕斤拷腔錕斤拷錕斤拷錕斤拷錕斤拷錕截ｏ拷
確實(shí)錕斤拷錕斤拷錕斤拷錕斤拷狻?
錕斤拷時(shí)錕斤拷錕狡的撅拷錕轎詫拷錕斤拷錕斤拷錕斤拷錕斤拷錕角的鳳拷錕斤拷錕斤拷謝錕斤拷啤錕斤拷肟達(dá)拷錕斤拷錕斤拷圖
錕斤拷未錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕截ｏ拷

錕斤拷錕斤拷錕斤拷錕斤拷錕角籌拷 canvas.rect

canvas.rect(x,y,w,h)錕矯鳳拷錕斤拷錕斤拷錕斤拷一錕斤拷錕斤拷錕斤拷路錕斤拷
x:錕斤拷錕斤拷錕斤拷錕斤拷 x 錕斤拷錕斤拷錕疥。
y:錕斤拷錕斤拷錕斤拷錕斤拷 y 錕斤拷錕斤拷錕疥。
width:錕斤拷錕轎的匡拷錕餃★拷錕斤拷值錕斤拷錕揭邊ｏ拷錕斤拷值錕斤拷錕斤拷摺錕?
height:錕斤拷錕轎的高度★拷錕斤拷值錕鉸斤拷錕斤拷錕斤拷值錕斤拷錕斤拷錕斤拷
錕斤拷錕斤拷錕斤拷錕斤拷譴錕斤拷錕揭伙拷錕斤拷錕斤拷錕鉸鳳拷錕斤拷錕斤拷錕斤拷錕斤拷錕鉸鳳拷錕斤拷錕斤拷錕斤拷錕街憋拷踴錕斤拷錕斤拷諢錕斤拷錕斤拷稀錕?
錕斤拷要錕斤拷錕斤拷stroke()錕斤拷fill()錕斤拷錕斤拷錕斤拷示錕節(jié)伙拷錕斤拷錕較★拷

使錕斤拷canvas.rect 錕斤拷錕狡撅拷錕斤拷路錕斤拷

function drawRect(x1,y1,x2,y2){
  let rectWidth = Math.abs(x2-x1)
  let rectHeight = Math.abs(y2-y1)
  // 錕斤拷錕斤拷之前錕斤拷錕斤拷錕街�前实时锟截氬K斤拷錕斤拷錕斤拷畝錕斤拷錕僥撅拷錕斤拷路錕斤拷
  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錕斤拷錕斤拷錕斤拷錕轎碉拷路錕斤拷(錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕節(jié)撅拷錕斤拷錕斤拷)
錕斤拷錕斤拷2錕斤拷時(shí)錕斤拷: canvas.strokeRect錕斤拷錕斤拷錕斤拷錕斤拷錕狡★拷canvas.rect錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕狡ｏ拷錕斤拷要錕斤拷錕斤拷stroke()錕斤拷fill()錕斤拷錕杰伙拷錕斤拷
錕斤拷同錕姐：
1.錕斤拷錕角伙拷錕狡撅拷錕斤拷
2.錕斤拷錕杰的詫拷錕斤拷錕斤拷同
3.錕斤拷錕斤拷通錕斤拷strokeStyle(錕斤拷色)錕斤拷lineWidth(錕竭的達(dá)拷細(xì))錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷式

錕斤拷錕斤拷錕斤拷錕狡訛拷錕斤拷錕斤拷錕?

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)
  // 錕斤拷錕斤拷之前錕斤拷錕斤拷錕街�前实时锟截氬K斤拷錕斤拷錕斤拷畝錕斤拷錕僥撅拷錕斤拷路錕斤拷
  ctx.clearRect(0,0,  canvasEle.width, canvasEle.height)
  // 錕斤拷錕斤拷之前錕斤拷些錕芥儲(chǔ)錕斤拷 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(); 
}
// 錕斤拷錕斤拷錕斤拷錕斤拷錕教э拷錕斤拷時(shí)錕斤拷要錕狡籌拷之前注錕斤拷錕狡訛拷錕鉸鹼拷錕斤拷抬錕斤拷錕鉸鹼拷
function canvasMouseUpHandler(){
  savaBeforeRect()
  canvasEle.removeEventListener('mousemove', canvasMoveHandler)
  canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)
}
function savaBeforeRect(){
  beforeRectArr.push(allRectInfoArr)
}

全錕斤拷錕斤拷錕斤拷

尾錕斤拷

錕斤拷錕叫★拷錕斤拷錕斤拷錕斤拷錕叫達(dá)拷牟錕斤拷錕斤拷幕錕?
錕斤拷錕皆革拷錕揭碉拷錕斤拷錕斤拷穡扛錕叫伙拷恕錕?
錕斤拷錕斤拷錕斤拷錕斤拷寫:
錕斤拷錕窖★拷芯錕斤拷危錕斤拷錕斤拷木錕斤拷未錕叫★拷錕?
錕斤拷錕斤拷誥錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷幀錕?
錕斤拷位錕斤拷錕皆詫拷錕斤拷錕酵鳳拷錕斤拷諾錕?