canvas中的清空畫布

阿新 • • 發佈：2019-01-14

使用下面方法：
1. context.clearRect(x,y,width,height);
2. save() 和 restore()
3. getImageData()和putImageData()

第一種方法：適合按區域清空，比如整個畫布。
第二種方法：就像一個儲存畫布狀態棧，可以撤銷，恢復。是一對操作。
第三種方法：和第二種有點相似，不是成對出現（putImageData()可以出現多次）。

第三種用法例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta 
 charset="UTF-8">
  <title>畫直線</title>
  <style>
    canvas {
      border: 1px solid;
    }
  </style>
</head>
<body>
  <p>滑鼠畫直線</p>
  <canvas width="800" height="600"></canvas>
  <script>
  var canvas = document.querySelector('canvas'),
      context = canvas.getContext('2d' 
),
      isDrag = false,
      startPoint = {};


  canvas.onmousedown = function () {
    isDrag = true;
    startPoint.x = event.x;
    startPoint.y = event.y;
  }

  canvas.onmousemove = function() {
    if(isDrag) {
      context.beginPath();
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(event.x, event.y);
      context.stroke();
    }
  }

  canvas.onmouseup = function 
() {
    isDrag = false;
  }
  </script>
</body>
</html>

這裡寫圖片描述

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>畫直線</title>
  <style>
    canvas {
      border: 1px solid;
    }
  </style>
</head>
<body>
   <p>滑鼠畫直線</p>
  <canvas width="800" height="600"></canvas>
  <script>
  var canvas = document.querySelector('canvas'),
      context = canvas.getContext('2d'),
      isDrag = false,
      startPoint = {},
      restorePoint = {};


  canvas.onmousedown = function () {
    isDrag = true;
    startPoint.x = event.x;
    startPoint.y = event.y;
    restorePoint = context.getImageData(0, 0, canvas.width, canvas.height);
  }

  canvas.onmousemove = function() {
    if(isDrag) {
      context.putImageData(restorePoint, 0, 0);
      context.beginPath();
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(event.x, event.y);
      context.stroke();
    }
  }

  canvas.onmouseup = function() {
    isDrag = false;
  }
  </script>
</body>
</html>

這裡寫圖片描述

canvas中的清空畫布

使用下面方法： 1. context.clearRect(x,y,width,height); 2. save() 和 restore() 3. getImageData()和putImag

js中清空數組的方法

數組清空 js第一種：利用的是數組的splice()方法第二種方法:註意在js裏面數組的長度是可讀可寫的。跟其他的語言不同。第三方法:實際上是將arr3指向了一個新的數組，這個數組中是空的，所以看起來像是被清空了，實際上並不能算是清空數組了。那麽之前的數組沒有其他的引用指向它，將被垃圾回收。js中清空數組的

[譯]在Linux中清空或刪除大檔案內容的5種方法

原文來源: https://www.tecmint.com/empty-delete-file-content-linux/ 有時，在處理Linux終端中的檔案時，您可能希望清除檔案的內容，而無需使用任何Linux命令列編輯器開啟它。怎麼能實現這一目標？在本文中，我們將藉助一些有用的命令，通過幾種不同的方式

vue中清空物件的方法

js中清空物件方法 1. 使用 delete 操作符 var obj={ name:'cc', age:12, gender:'famle' } for(var key in obj){ delete obj[key]; } 2. 使用字

Java中清空console控制檯的程式碼片段

該操作時讓機器人模擬人手按快捷鍵來實現的 void clear() { try { Robot r = new Robot(); r.mousePress(InputEvent.BUTTON3_DOWN_MAS

vue中清空input標籤中file的值

<input type="file" ref="clearFile" name="file" id="file"> <button @click="clearFile"><

Qchart 中清空繪圖

最近使用Qchart畫圖也是要畫瘋的節奏，最近又碰到了疑難雜症，在網chart匯入線條後，想把他們清除掉，結果發現怎麼也清除不了，在別的部落格上說用這樣的函式， m_series1->clear(); m_scatseries1->clear();

JavaScript中清空陣列的三種方式

方式1，splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary);// 輸出 []，空陣列，即被清空了方式2，length賦值為0 這種方式很有意思，其它語言如Java，其陣列的l

JS中清空字串前後空格

在JS 操作的時候長期會有對字串的操作，但是在JS 中不像在C#中有字串的方法 Trim() 來對字串進行處理。所以自己寫一個對字串前後清楚空格的方法還是有必要的以免以後忘記了在這

Js中清空檔案上傳欄位(input type=file )

表單中type=file欄位的value屬性無法由js來附值,一但選中某個檔案後,如果使用者不手動去清空那麼這個值將保留,提交表單時對應檔案也會被提交上去.當然在伺服器上會再次驗證,不過為了避免上傳不必要的的檔案,還是有必要提前在客戶端驗證失敗後將檔案上傳欄位清空.

android中清空所有activity棧

方法一： ActivityManager am = (ActivityManager)getSystemService(TipsActivity.this.ACTIVITY_SERVICE); am.rest

memcached和redis中清空快取

memcached：命令列使用 flush_all 將所有的資料都設定為過期，但記憶體空間不釋放 redis：命令列使用 (1) flush all 刪除所有資料庫的所有key (2) flushdb 刪除當前庫或所選庫的所有key

Asp Net中清空所有textbox的幾種方法

jquery rip length fun sha apt instance == view 分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！http://www.captainbed.net fore

Chart.js清空canvas畫布 clearRect()等canvas方法擦除失敗（附完整程式碼）

一、直接移除DOM物件方式 1.原因 clearRect()等canvas方法清空失敗 2.方法移除dom物件的方式 $('#canvas').remove(); $('#container

怎麽恢復手機中誤清空的文件手機數據恢復方法

隨著手機辦公越來越方便快捷化，手機也成為辦公的重要工具，裏面也保存著我們的重要文件數據。當我們在清理手機數據的時候，總是會誤清空手機裏的文件數據，比如上學期間，學習發的各種活動通知和考試安排。這文件被清空，就真的很麻煩。那我們該怎麽恢復手機中被誤刪除的文件呢？強力數據恢復軟件是一款

怎麽恢復安卓手機中被清空的照片？手機照片誤刪怎麽恢復

在安卓手機卡頓或下載不了軟件顯示內存不夠的時候，我們大多數人的做法就是將安卓手機還原成出廠設置。這就意味著手機中的照片被全部清空了，那被清空的手機照片還能恢復嗎？我們該怎麽恢復手機中被清空的照片？借助互盾照片恢復軟件免費版，能有效的恢復安卓手機中被誤清理的照片。操作簡單，電

如何找回被誤清空回收站中的文件

回收站文件　　回收站清空的文件怎麽找回？我相信不少小夥伴都想知道，回收站裏清空的文件該怎麽找回，雖然回收站裏的文件大多是我們不會再使用到的文件，但是偶爾也會有一些我們可能會用到的文件被誤刪了，因此怎麽恢復回收站清空的文件呢？其實只要你學會利用資源，借助工具，就能恢復被清空的回收站。我們借助強力回收

Canvas清空

改變綁定 clear map mod xfermode ear 清空 bit 當canvs與bitmap綁定時，canvas上繪制會導致bitmap改變內容，而且內容時疊加的。這時候需要清空bitmap上的內容，可以用以下做法。　　Paint paint = new Pa

Mysql清空表(truncate)與刪除表中數據(delete)的區別

重置 mysq 原因 nts 整體觸發器操作兩種方法字段刪除表中數據： truncate table wp_comments; delete * from wp_comments; 兩種方法的區別：其中truncate操作中的table可以省略，delete

vueJS加jquery使用構建項目中v-model綁定的值無法清空

mode ace put pan 焦點 HA cti stat 事件怎樣清空v-model綁定的input值緩存在vue+bootstrap+jquery構架您的項目中，列表中formatter格式化單元格顯示的操作按鈕綁定bootstrap模態框，在模態框彈出的頁面中

canvas中的清空畫布

相關推薦