小程序Canvas隐藏问题处理

以你之姓@ 2022-05-23 13:38 390阅读 0赞

**一、目前版本小程序框架**

当前问题参考处理建议使用这种方式：[https://my.oschina.net/tianma3798/blog/2051575][https_my.oschina.net_tianma3798_blog_2051575]

**canvas使用方面还有些不足地方。**

比如：canvas 的直接隐藏目前不可用 display：none

只要使用上线文draw绘制就会显示在页面最上层，遮盖其他内容。

当前问题解决方案1：

在page的直接子节点添加一层view，将view设置隐藏就可以了。

<view style='width:0px;height:0px;overflow:hidden;'>
      <canvas canvas-id='canone'></canvas>
    </view>

绘制代码，照常起作用

//绘制命令
      drawOne: function () {
        var url = 'http://www.jnqianle.cn/upload/logo/content/201806/05/04c2d5f9-3e8e-4590-a4e7-f231a6fb1778.jpg';
        //加载到canvas中
        var ctx = wx.createCanvasContext('canone', this);
        ctx.drawImage(url, 0, 0, 100, 100);
        ctx.draw();
      },

更多：

[ C\#实现微信AES-128-CBC加密数据的解密][C_AES-128-CBC]

[js进制转换操作整理][js]

[js为Object对象动态添加属性和值][js_Object]

[https_my.oschina.net_tianma3798_blog_2051575]: https://my.oschina.net/tianma3798/blog/2051575
[C_AES-128-CBC]: https://blog.csdn.net/u011127019/article/details/79638279
[js]: https://blog.csdn.net/u011127019/article/details/77056710
[js_Object]: https://blog.csdn.net/u011127019/article/details/59112030

发表评论取消回复

表情：

评论列表（有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 104 阅读

相关 uniApp小程序保存图片canvas

<template> <view class="poster_box">  <view class="my

落日映苍穹つ/ 2022年12月25日 14:57/ 0 赞/ 286 阅读

相关小程序canvas签字功能

先看效果图 ![在这里插入图片描述][20200913201220223.gif_pic_center] 上代码 canvas.wxml <canvas

Dear 丶/ 2022年12月06日 15:05/ 0 赞/ 203 阅读

相关小程序canvas高斯模糊

//以下是小程序html代码 <canvas canvas-id="canvasIn" class="canvas"></canvas> <canv

缺乏、安全感/ 2022年09月08日 12:54/ 0 赞/ 267 阅读

相关小程序问题处理

小程序 1、事件对象 a) Bind 冒泡阶段触发都事件 touchstart touchmove touchcancel touchend tap longtap

怼烎@/ 2022年05月26日 06:55/ 0 赞/ 428 阅读

相关小程序Canvas隐藏问题处理

一、目前版本小程序框架当前问题参考处理建议使用这种方式：[https://my.oschina.net/tianma3798/blog/2051575][https_my.

以你之姓@/ 2022年05月23日 13:38/ 0 赞/ 391 阅读

相关小程序 canvas旋转文字

小程序实现：效果如下图： ![70][] js部分： //canvas画图片 savedetailCanvas : function () \{ //

末蓝、/ 2022年05月21日 06:28/ 0 赞/ 579 阅读

相关小程序隐藏滚动条

页面代码 <scroll-view scroll-x class="my_scroll"> <view class='my_scroll_box'

逃离我推掉我的手/ 2022年04月16日 03:49/ 0 赞/ 302 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 450 阅读

相关小程序canvas的一个坑

很奇怪，原来好好的，结果现在显示乱了，模拟器和手机都不一样。模拟器上，整个canvas都往右偏移了，手机上，右侧有一大片空白。反复试验，发现问题是：page的对齐方式

Love The Way You Lie/ 2021年09月17日 13:38/ 0 赞/ 353 阅读