位置:首页 > web前端 > javascript

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

dearweb 发布:2021-10-16 15:24:44阅读:

相信不少要合成图片的小伙伴一定被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>

效果预览图

image.png

一篇文章学好canvas

24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看