html5标签canvas如何插入图片 修改起点坐标位置 图片大小

相信不少要合成图片的小伙伴一定被canvas这个标签难住了吧？本文主要介绍在使用canvas标签时向画布中插入图片的方法。

首先定义一下canvas标签

需要给canvas标签添加id、以及宽高属性等。

<canvas id="myCanvas" width="400" height="400" style="border: 2px solid grey">当前浏览器不支持canvas</canvas>

画图开始

下面就是将图片插入canvas的js方法，以及修改图片大小和起始坐标位置的方法

<script>
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")

var img = new Image()
img.src = 'paddle.png'
  //图片加载完后，将其显示在canvas中
img.onload = function(){
  context.drawImage(this, 0, 0)  // 0,0 为起点坐标位置
  // context.drawImage(this, 0, 0, 1080, 980)  // 改变图片大小到1080*980
}
</script>

效果预览图

一篇文章学好canvas