小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我是用canvas写出来了静态的canvas图,现在想让这些canvas图动起来,类似于h5的canvas,虽然官方库里的api给了transform,但是在实际使用时,并没有产生任何效果
使用transfrom代码如下
其并没有什么改善
有三个问题,
1、transform如何使用?
2、如何控制整个canvas恢出的图已同等比例放大、缩小、上下左右运动,并保持画布没有变动
3、如何控制canvas绘图中的其中一个图控制其运动动作
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
试一下在touchmove transform之后重新画一下canvas,并再次调用ctx.draw()方法
Page({
onLoad() {
const ctx = wx.createCanvasContext('myCanvas')
// 第一次渲染
this.render(ctx)
// 模拟touchmove
setTimeout(() => {
ctx.translate(10, 10)
// 变化之后重新渲染
}, 1000)
},
render(ctx) {
ctx.fillStyle = "yellow"
ctx.fillRect(50, 50, 250, 100)
// 再次调用draw方法
ctx.draw()
}
})
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
我就是这么写的
之前写过一个canvas触摸缩放旋转移动的,但是因为小程序canvas限制,选择原图滑动的时候有bug,渲染层阻塞了touchmove的触发,放弃了,你的需求是可以用canvas实现的,事件触发清空画布再drawImage就行了,
我换了一种思路,发下可以,
思路大致如下,改变数据,然后重新绘图,但是不知道资源消耗情况会怎么样
canvas本身不大,内容不是很复杂,就不会有啥性能问题哎
首先,直接设css动画是没效果的。不知道用 wx.createAnimation的方式有没有效果。不过可以把canvas保存成临时文件,然后把路径赋值给 image标签,然后可以给 image标签加你要的特效
1、wxml
2、wxss
3、js
想问一下,似乎没有 css3 的过度效果,怎么回事呀? 还望解答一二
你界面上写成了 is_slick ?
看来得擅长 c v ,不能老是自信手写 233333。 谢谢啦,感觉程序猿最热心啦
噗嗤~ 程序员就是要有自信
想问一下,个人开发的小程序需要 数据库 的数据,是不是还要自己准备域名和 服务器,然后进行搭建呀? 还是需要别的什么呢?
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
试一下在touchmove transform之后重新画一下canvas,并再次调用ctx.draw()方法
Page({
onLoad() {
const ctx = wx.createCanvasContext('myCanvas')
// 第一次渲染
this.render(ctx)
// 模拟touchmove
setTimeout(() => {
ctx.translate(10, 10)
// 变化之后重新渲染
this.render(ctx)
}, 1000)
},
render(ctx) {
ctx.fillStyle = "yellow"
ctx.fillRect(50, 50, 250, 100)
// 再次调用draw方法
ctx.draw()
}
})
我就是这么写的
之前写过一个canvas触摸缩放旋转移动的,但是因为小程序canvas限制,选择原图滑动的时候有bug,渲染层阻塞了touchmove的触发,放弃了,你的需求是可以用canvas实现的,事件触发清空画布再drawImage就行了,
我换了一种思路,发下可以,
思路大致如下,改变数据,然后重新绘图,但是不知道资源消耗情况会怎么样
canvas本身不大,内容不是很复杂,就不会有啥性能问题哎
首先,直接设css动画是没效果的。不知道用 wx.createAnimation的方式有没有效果。不过可以把canvas保存成临时文件,然后把路径赋值给 image标签,然后可以给 image标签加你要的特效
1、wxml
2、wxss
3、js
想问一下,似乎没有 css3 的过度效果,怎么回事呀? 还望解答一二
你界面上写成了 is_slick ?
看来得擅长 c v ,不能老是自信手写 233333。 谢谢啦,感觉程序猿最热心啦
噗嗤~ 程序员就是要有自信
想问一下,个人开发的小程序需要 数据库 的数据,是不是还要自己准备域名和 服务器,然后进行搭建呀? 还是需要别的什么呢?