微信小程序中canvas.drawImage画图

微信小程序中canvas.drawImage画图,第1张

描述:在页面加载是使用canvas.drawImage画图,点击页面下面按钮在已绘制好的图形上继续画图。使用ctx.draw()弄了多次,均会把之前的图清掉橡嫌圆重新绘制,看文档得知,在ctx.draw()时,传入参数true即可保存原来绘制的图,在此记录梁塌一下。

详见如者孙下:

canvas使用:

index.wxml中

js中

wav的罩蠢纯理论上可以放,但你的音频是wma的吧,不知道能不能放。我下了个mid的来试,音频文件与applettext.java在同一目录,并新建play.html,内嵌applet。建议用 appletviewer play.html 命令来运行。小程序启动有点慢,需多等一会儿。

代码如下:

import java.applet.*

import java.awt.*

import java.net.*

public class applettext extends Applet

{

String str="周华健 - 刀剑如梦.mid"

URL file=getClass().getResource(str)

AudioClip ac=java.applet.Applet.newAudioClip(file)

public void paint(Graphics g)

{

Image img=getImage(getCodeBase(),"图像0023.jpg")

// Image buffer=createImage(getWidth(),getHeight())

/档租/ Graphics g1=buffer.getGraphics()

// g1.drawImage(getImage(getCodeBase(),"图像0023.jpg"),0,0,null)

MediaTracker mt=new MediaTracker(this)

mt.addImage(img,0)

try

{

mt.waitForID(0)

}

catch(Exception e){}

g.drawImage(img,0,0,null)

// g.drawImage(buffer,0,0,null)

}

public void init()

{

// play(getCodeBase(),"周华健物咐 - 刀剑如梦.WMA")

}

public void start()

{

////AudioClip ac=getAudioClip(getCodeBase(),"周华健 - 刀剑如梦.WMA")

if(ac!=null){

////System.out.println("音乐已加载:"+ac)

System.out.println("音乐已加载:"+str)

ac.play()

}

else System.out.println("音乐没加载!")

ac.loop()

}

}

//<applet code="applettext.class" width=600 height=400>

//</applet>

最近在微信小程序开发中需要用到canvas绘制中国象棋的的棋盘棋子,该需求用来复盘对弈记录,由于复盘的每一步都是用fen串 (参考:FEN文件格式) 来转换出所有棋子的位置,所以每一步都会将棋子重新绘制一遍,为了避免显示上一次步绘制i的内容需要先清空canvas再绘制新的棋子,清空和重新绘制的过程就会出现闪屏的现象,所以每次点上一步下一步的时候都会闪一下,体验很不好。

为了前蠢解决这个问题,搜索了一些解决方案,最终决定参考双缓存 《在Canvas clearRect中引起的闪屏怎么解决?双缓存解决闪屏问题详解!》 的方式解决这个问题。

由于棋子元素过多,每一颗棋子都要调用一次drawImage,且新版的canvas是异步进行的,如果不采用缓存的方式,看起来不仅有闪烁的现象还会有一种棋子一个一个出斗运现的感觉。现将内容绘制好生成图片,在另一个canvas中只需要绘制这一张图片并覆盖之前的内容,而不需要清空,这样就避免了闪屏的问题。

效慧销陪果对比:

如果有更好的方案,请不吝赐教。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12397252.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存