canvas畫圖和清除圖片
阿新 • • 發佈：2019-01-08
在canvas上畫一張圖其實很簡單，就是用drawImgage函式。
定義
這裡先貼上w3c裡的定義和用法：
- JavaScript 語法 1 (在畫布上定點陣圖像：)
context.drawImage(img,x,y);- JavaScript 語法 2 (在畫布上定點陣圖像，並規定影象的寬度和高度：)
context.drawImage(img,x,y,width,height);- JavaScript 語法 3 (剪下影象，並在畫布上定位被剪下的部分：)
context.drawImage(img,sx,sy,swidth,sheight,x,y,width | 引數 | 描述 |
|---|---|
| img | 規定要使用的影象、畫布或視訊。 |
| sx | 可選。開始剪下的 x 座標位置。 |
| sy | 可選。開始剪下的 y 座標位置。 |
| swidth | 可選。被剪下影象的寬度。 |
| sheight | 可選。被剪下影象的高度。 |
| x | 在畫布上放置影象的 x 座標位置。 |
| y | 在畫布上放置影象的 y 座標位置。 |
| width | 可選。要使用的影象的寬度。（伸展或縮小影象） |
| height | 可選。要使用的影象的高度。（伸展或縮小影象） |
以上內容參考自: w3c
也可以去這個w3c上去測試使用方法。
例子程式碼
先貼html的程式碼內容：
<img src="../img/test.jpg" alt="test pic" id="test_img">
<canvas id="canvasOne"></canvas>請給canvas設定一下高和寬，然後js程式碼如下：
$(document).ready(function() { //這裡是jquery的ready方法，使用的話請匯入jquery，不想用請用document.load()
var theCanvas = document.getElementById("canvasOne" 清除drawImage內容
現在我找到的就兩個辦法，一個是fillRect()把內容直接覆蓋掉，一個是clearRect()清除掉內容。
fillRect
這個的使用方法很簡單：
context.fillRect(x,y,width,height);例子：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);clearRect
這個的使用方法和fillRect極其相似：
context.clearRect(x,y,width,height);例子：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);就這些~ 其實我是想實現圖片拖動，放大縮小然後剪下的。雖然我已經實現了~ 放到下一篇部落格裡。