小程序canvas绘制并保存图片

这篇主要讲canvas绘制以及保存到本地相册的方法

实现功能如下：

1用户手动输入文字，并把这些文字绘制到canvas中

2将绘制到canvas中

3将canvas变成并保存到本地相册中

效果如图：

第一部分 wxml

要注意写这种形式tpye='2d'，这是新版本的，旧版本的如下图已经不维护了，所以建议写这种，另外要注意id，不是写canvas-id，而只是id

第二部分 js

这么一写下来也没有什么特别难的地方。其实还可以实现用户手动上传，这样可能会更有趣一点

在微信小程序使用canvas绘制圆角矩形时，在Android出现变形、锯齿现象，而iOS正常。

根据小程序社区回复：使用ctxarc + ctxlineTo就能避免Android错误，Android只使用ctxarcTo不兼容！！！

解决方案：

在小程序中，Canvas 组件是一个用于绘制图形的画布组件，它可以让开发者在画布上绘制图形、添加事件等 *** 作。如果画布的高度大于屏幕高度，并且没有进行特殊设置或调整，那么在小程序中是无法遮挡系统底部导航的。

需要注意的是，小程序的底部导航条是系统自带的组件，在小程序中无法直接修改或遮挡。如果你需要使用自定义的导航条，可以考虑使用小程序的自定义组件或自己实现相应的功能。

如果确实需要在小程序中遮挡系统底部导航，可以考虑以下几种方法：

1 调整画布高度

可以通过代码动态调整 Canvas 画布的高度，使得画布高度不超过屏幕高度，从而避免遮挡底部导航。例如，可以获取屏幕高度并设置画布高度为屏幕高度减去一定的偏移量。

2 建立全屏页面

可以把绘制画布的页面作为一个全屏页面，并在该页面中隐藏系统底部导航条，从而实现遮挡底部导航的效果。需要注意的是，这种方法可能会影响用户体验，并且需要保证用户能够方便地返回到其他页面。

3 使用小程序组件库

一些小程序组件库可能提供了类似于 Canvas 的绘图组件，并且可以支持遮挡系统底部导航的功能，可以尝试使用这些组件库中提供的组件实现相应的效果。

总之，需要根据具体的业务需求和实际情况选择合适的方法来实现相应的效果。

项目中用canvas生成时都为空白，原因为 wxcanvasToTempFilePath必须写在wxdraw()的回调中才能实现。

官方wxcanvasToTempFilePath说明： >

Canvas 组件表示屏幕上一个空白矩形区域，应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。

应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。必须重写paint 方法，以便在 canvas 上执行自定义图形。

举例：

Paneladd(new MyCanvas());//往panel中添加画布canvas

class MyCanvas extends Canvas {//定义一个canvas

public MyCanvas () {

setBackground (ColorGRAY);//设置背景为灰色

setSize(300, 300);//定义canvs大小是300300

}

public void paint (Graphics g) {//画布的paint方法，

Graphics2D g2;

g2 = (Graphics2D) g;

g2drawString ("It is a custom canvas area", 70, 70);//屏幕输出该字符串

}

}

小程序canvas生成转发图时需要canvas隐藏 不能使用 display:none; hidden属性 加上后canvas不能绘图

网上的方法都试过了 都不行最后自己实现了 但是不能进行翻页，有更好的方法欢迎提供 万谢

最先试过这个方法 外层套view ,width height都设为0 模拟器生效 真机不生效

后来查到了 可通过cover-view 自定义view标签 进行遮盖

然后发现真机上 cover-view 按下后带有灰色背景 最后想直接定位到屏外 页面禁止滑动 最后成了

json中加入

最后是行了 反正页面就两按钮不需要滑动， 求更好的方法实现

以上就是关于小程序canvas绘制并保存图片全部的内容，包括:小程序canvas绘制并保存图片、微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿、小程序canvas能遮住系统底部导航吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！