canvas drawImage()

2018-8-9 09:34| 作者: admin| 查看: 4796| 评论: 0|来自: 蚂蚁部落

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作为图片源的功能。


鲜花

握手

雷人

路过

鸡蛋
返回顶部