小程序canvas生成转发图时需要canvas隐藏 不能使用 display:none; hidden属性 加上后canvas不能绘图
网上的方法都试过了 都不行最后自己实现了 但是不能进行翻页，有更好的方法欢迎提供 万谢
最先试过这个方法 外层套view ,width height都设为0 模拟器生效 真机不生效
后来查到了 可通过cover-view 自定义view标签 进行遮盖
然后发现真机上 cover-view 按下后带有灰色背景 最后想直接定位到屏外 页面禁止滑动 最后成了
json中加入
最后是行了 反正页面就两按钮不需要滑动， 求更好的方法实现
最近有一个需求说是需要换颜色。
最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的组成
根据循环可以得出
组成是ARGB格式，第一个是透明度，后续rgba
2、得出的循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0]; if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1]; if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]; } 复制代码
3、注意替换颜色应该是倒序
所以0,1,2,3的顺序
替换的rgb颜色应该是3,2,1
得到数组rgb：data[i],data[i-1],data[2]
替换方式看上面代码
4、完整代码格式
<!DOCTYPE html> <html> <style> #btn { width: 100px; height: 50px; background: coral; position: fixed; top: 0; } </style> <head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImagesrc = "1719ebbc83be39f0webpjpg"; c = documentgetElementById("myCanvas"); if (cgetContext) { ctx = cgetContext("2d"); myImageonload = function() { ctxdrawImage(myImage, 0, 0); } } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctxgetImageData(0, 0, myImagewidth, myImageheight); var pdata = imageDdata; for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]; if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]; if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2]; } ctxputImageData(imageD, 0, 0); } function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129]); } </script> </head> <body onload="displayImage()"> <p>原始：</p> <img id="myPhoto" src="1719ebbc83be39f0webpjpg"> <p>Canvas：</p> <canvas id="myCanvas" width="200" height="200"></canvas> <button id="btn" onclick="colorChange()">变颜色啦！</button> </body> </html>
以上就是关于微信小程序Canvas隐藏 不影响canvas绘图处理办法全部的内容，包括:微信小程序Canvas隐藏 不影响canvas绘图处理办法、求canvas小程序该效果，要求最终输出rgb值对象需要根据传入的rgb正确定位点的位置、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）