微信小游戏canvas画布拖动图片

新手学习，作为笔记。还请高手多多指点，谢谢。

var canvas = wx.createCanvas()
var context = canvas.getContext('2d')
var bgm = wx.createImage()
var hero = wx.createImage()
var x = canvas.width / 2 - 40
var y = canvas.height - 80
//hero初始坐标
bgm.src = 'images/bgm.jpg'
hero.src = 'images/hero.png'
//console.log(x, y)
bgm.onload = function () {context.drawImage(bgm, 0, 0)//图片加载完成，绘制背景图片
}
hero.onload = function () {
context.drawImage(hero, x, y, 80, 80)
//图片加载完成，绘制hero图片
}
wx.onTouchMove(function (e) {var nx = e.touches[0].clientX - 40var ny = e.touches[0].clientY - 40//获取触摸滑动的坐标if (nx > x - 40 && nx < x + 40 && ny > y - 40 && ny < y + 40) {//判断触摸坐标是否在图片坐标上context.clearRect(0, 0, canvas.width, canvas.height)//清空画布context.drawImage(bgm, 0, 0)context.drawImage(hero, nx, ny, 80, 80)//重新绘制图片x = nxy = ny//更新飞机x,y坐标}else {console.log("条件没满足，不能移动", x, y, nx, ny)}})

微信小游戏canvas画布拖动图片相关推荐

微信小游戏 - Canvas/WebGL Demo 移植
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
移植到android_微信小游戏 Canvas/WebGL Demo 移植
本文由大神易旭昕授权发布, 原文链接:https://zhuanlan.zhihu.com/p/33785287 (点击文后原文链接可跳转至作者的知乎) --------------------- ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
微信小程序 canvas画布渲染云存储的图片
[已解决]问题: 在云开发小程序过程种,用canvas画布渲染云存储的图片,发现不能显示.用http带头的网络图片是可以显示的,用cloud带头的云存储图片就是不行.http带头的网络图片可以展示, ...
微信小程序canvas把正方形图片绘制成圆形
在微信小程序里效果图: 直接代码: <canvas style="width: 400px; height: 400px;border:1px solid red" canv ...
微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
uniapp/小程序 canvas画布导出图片并下载到本地
如果微信原生的话,此处uni可以换成wx this.canvas是上一篇文章生成的canvas画布 uni.canvasToTempFilePath({// res.tempFilePath临时路径c ...
微信小程序canvas画布转成图片并在转发里面形成图片转发
onReady() {var that = thisvar rpx = wx.getSystemInfoSync().windowWidth / 375; //加入rpx进行手机适配const que ...

微信小游戏canvas画布拖动图片

微信小游戏canvas画布拖动图片相关推荐

最新文章

热门文章