canvas drawImage()

admin發表於2018-08-09
Canvas

canvas具有強大的圖片操作能力，不但可以處理自身繪圖。

也可以引入外部圖片或者視訊進行更加精細的處理，以滿足需求。

本文介紹一下如何利用drawImage方法引入外部圖片或者視訊進行處理。

drawImage方法具有多個過載，下面分別做一下介紹。

語法結構一：

[JavaScript] 純文字檢視 複製程式碼
drawImage(image, x, y)

引數解析:

（1）.image：源圖片，可以是一張普通的圖片、其他canvas元素，也可以是一個視訊。

（2）.x：圖片在當前畫布的x軸座標。

（3）.y：圖片在當前畫布的y軸座標。

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
drawImage(image, x, y, width, height)

引數解析:

（1）.image：源圖片，可以是一張普通的圖片、其他canvas元素，也可以是一個視訊。

（2）.x：圖片在當前畫布的x軸座標。

（3）.y：圖片在當前畫布的y軸座標。

（4）.width：規定繪製圖片的寬度。

（5）.height：規定繪製圖片的高度。

語法結構三：

[JavaScript] 純文字檢視 複製程式碼
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

引數解析:

（1）.image：源圖片，可以是一張普通的圖片、其他canvas元素，也可以是一個視訊。

（2）.（sx,sy）:規定切割源圖片的座標。

（3）.（sWidth,sHeight）:規定切割的尺寸。

（4）.（dx, dy）:規定在畫布的哪個位置開始繪製。

（5）.（dWidth, dHeight）:規定繪製圖片的尺寸。

語法結構三功能圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155627w5w8eue8889151r8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

為了演示方便，以下面的圖片為例子進行操作：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155648vby0x0oxyvc27mwg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

309x99的圖片分隔為9份，每一份的長寬分別是103px和33px。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted red;
}
</style>
<script>
window.onload = function () {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.onload = function () {
    ctx.drawImage(img,33,33);
  }
  img.src = "http://www.softwhy.com/mytest/demo/mybg.png";
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="140"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155731c4phs7161u12p226.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將源圖片引入到當前畫布，源圖片的左上角座標是（33,33）。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted red;
}
</style>
<script>
window.onload = function () {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.onload = function () {
    ctx.drawImage(img,10,10,200,100);
  }
  img.src = "http://www.softwhy.com/mytest/demo/mybg.png";
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="140"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155753znmemm7pxmll37ml.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第三個和第四個引數規定了源圖片的尺寸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted red;
}
</style>
<script>
window.onload = function () {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.onload = function () {
    ctx.drawImage(img,103,33,103,66,50,50,206,132);
  }
  img.src = "http://www.softwhy.com/mytest/demo/mybg.png";
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="200"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155817uw8ai6lywxqy835y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼是語法結構三的應用，下面再回顧一下語法結構三：

[JavaScript] 純文字檢視 複製程式碼
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

此語法解構功能分解如下：

（1）.首先對源圖片進行切割。

（2）.然後按照指定的座標和指定的尺寸將切割後的圖片繪製到畫布上。

特別說明：引數中的s標識slice切割的意思，d代表draw繪製的意思，先切割再繪製。

程式碼分析如下：

從源圖片的(103,33)處開始進行切割，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155850x9313zzjknzjh1vv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也就是從區塊5的左上角開始進行切割。

然後從區塊5左上角切割一塊長103畫素，寬66畫素的區域，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/155903uldl72l65rezltcz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上圖是從源圖切割下來將要繪製到畫布上的圖片。

最後將此圖尺寸設定為寬度206畫素，高度132畫素，繪製到畫布之上。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload=function(){
  var v = document.getElementById("video1");
  var c = document.getElementById("myCanvas");
  ctx = c.getContext('2d');
  
  v.addEventListener('play', function () {
    var timer = window.setInterval(function () {
      ctx.drawImage(v, 0, 0, 270, 135)
    }, 20);
  }, false);
  v.addEventListener('pause', function () {
    window.clearInterval(timer);
  }, false);
  v.addEventListener('ended', function () {
    clearInterval(timer);
  }, false);
}
  </script>
</head>
<body>
<video id="video1" controls width="270" autoplay>
  <source src="demo/html5/video/antzone.mp4" type="video/mp4" />
  <source src="demo/html5/video/softwhy.ogg" type="video/ogg" />
</video>
<p>：</p>
<canvas id="myCanvas" width="270" height="135"></canvas>
</body>
</html>

上述程式碼中，方法的第一個引數是視訊，畫布每20毫秒就會繪製視訊的當前幀。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var oneCanvas = document.getElementById("one");
  var twoCanvas = document.getElementById("two");
  
  var oneCtx = oneCanvas.getContext('2d');
  var twoCtx = twoCanvas.getContext('2d');
  twoCtx.beginPath();
  twoCtx.fillRect(0, 0, 150, 150);
  oneCtx.drawImage(twoCanvas, 100, 100);
}
</script>
</head>
<body>
<canvas id="one" width="550" height="450"></canvas>
<canvas id="two" width="150" height="150"></canvas>
</body>
</html>

上面的程式碼演示了，將一個canvas作為圖片源的功能。

相關文章