小程序canvas绘制并保存图片_软件运维

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

实现功能如下：

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

2.将图片绘制到canvas中

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

效果如图：

第一部分 wxml

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

第二部分 js

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

在wxml中添加<canvas></canvas>组件。注意，这里必须要给id属性，style属性中必须有饥孙width和height。关于width和height的值，有个技巧就是width为100%，height为window高度。

获取window的高度，宽度，和像素比例。

写画图方法。新建canvas的上下文环境context，通过画window大小的矩形来设置背景色为#ffffff，老肢饥将图片插入到canvas中（注意left，top，width，height等参数），将文本插入到canvas中。最后调用wx.drawCanvas()来将图形和文字绘制出来。

在onReady中准备好图片（因为后期需要长按保存，所以需要使用https下图片，这里先下载到缓存中），调用前面定义绘图方法。

图片生成侍返，在真机（注意一定要在真机上测试，因为经常会出现开发工具中是好的，但是真机不能画出来的问题，一定要注意！）上测试也通过，OK啦。（这里不贴手机上的截图了）。

canvas 中可以用 fillText() 绘出文字。

例如：

Your browser does not support the HTML5 canvas tag.</canvas>

var c = document.getElementById("myCanvas")

var ctx = c.getContext("2d")

ctx.font = "20px Georgia"

ctx.fillText("Hello World!", 10, 50)

ctx.font = "30px Verdana"

var gradient = ctx.createLinearGradient(0, 0, c.width, 0)

gradient.addColorStop("0", "magenta")

gradient.addColorStop("0.5", "blue")

gradient.addColorStop("1.0", "red")

ctx.fillStyle = gradient

ctx.fillText("Big smile!", 10, 90)

</script>

<p><橘蚂strong>Note:</strong>The canvas tag is not supported in Internet

Explorer 8 and earlier versions.</p>

</body>

</html>

====

如果想插入显扰伍搜示一个文件或网页，可以用缓历 <iframe>, 而不是用画布<canvas>,

例如：

欢迎分享，转载请注明来源：内存溢出

小程序canvas绘制并保存图片