小程序利用canvas生成海报分享朋友圈
研究了有一段时间的canvas海报生产了,其实说难也不难,就是感觉是挺麻烦的,今天能够写这些,也就说明俺已经领悟的差不多了,现在写一些学习小程序canvas生产海报的学习心得,共同探讨一下。

初始化Canvas

由于本人以前学过一段时间的设计,所以对于画图方面有所熟悉,所有的图都是慢慢拼接出来的,感觉这个画图的过程就像是使用PS一样,一点一点的慢慢在画布上填充自己想要的东西,然后达到自己想要的效果。关于小程序画图,首先我们需要初始化Canvas,也就是在.wxml中创建一个canvas,他有两个属性canvasWidthcanvasWidth分别为创建的canvas的宽高。

<view class="canvas-box">
    <canvas canvas-id="canvas" class="canvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas>
<view>

wxml文件里面只需要设置好画布的宽和高就可以了,其他的都是在.js文件中设置的。

隐藏Canvas

由于小程序中canvas层级最高,所以我们在初始状态时需要隐藏它,在需要展示的时候在显示它。
隐藏有很多种方法,这里我直接通过wxss将它隐藏。

.canvas-box{  
  position: fixed;  
  top: 1000px;  
  left: 1000px;  
  z-index: -10;  
}

获取上下文

这个上下文你就他当作是先创造一个画图环境进行了。

const ctx = wx.createCanvasContext('canvas'); // canvas-id

接下来就是一下重要的知识点了!!!

绘制图片

const img = '/images/bg.png';
const imgX = 0;      // 绘制图片在canvas中起点X坐标
const imgY = 0;      // 绘制图片在canvas中起点Y坐标
const imgWidth = 0;  // 绘制图片在canvas中宽度
const imgHeight = 0; // 绘制图片在canvas中高度
ctx.drawImage(img, imgX, imgY, canvasWidth, canvasHeight);

如果图片是本地文件可以直接通过上诉方法绘制,若图片为网络图片是需要通过wx.getImageInfo或者WX.downloadFile下载到本地,然后再绘制

绘制文字

ctx.setFontSize(30);          // 文本字体大小
ctx.setFillStyle("#E1E6F0");  // 颜色
const text = '我是文字';   //需要绘制的文字
const textX = 0;         //文字起点的x坐标
const textY = 0;          //文字起点的y坐标
ctx.fillText(text, textStartX, textY);

绘制图片的x,y坐标是从图片的 左上角 开始计算位置的。
绘制文字的x,y坐标是从文字的 右下角 开始计算位置的。

还有很多,但是只要学会绘制文字和图片,然后早准尺寸,直接干就完事了,哈哈哈,加油!


版权属于:安好屋

转载时须注明出处及本声明

安好屋小程序相关内容全站迁移公告 微信公众号:阳光艺创站
最后修改:2020 年 02 月 14 日 01 : 21 PM
好吧,我穷的快要被消灭了。