微信小程序canvas画海报-2-设计要点

前端

2024-02-10 15:56:43

技术背景

微信小程序canvas画海报算是最近的一个热点,像前几天的安卓端的分期,后端java配置啥的,今天就给大家讲一下canvas画海报的设计要点.

什么是canvas?
canvas就是前端的一个标签画布,通过使用html5的dom元素配合canvas 就可以做很多视觉上的操作.

实现过程

实现流程就和画图流程类似,我们首先要有一个原型,然后我们把原型上加一些点去修正,然后把点线成面,最后在面里上色,形成一个完整的原型.最终形成一个海报的原型,只不过这个原型是通过canvas画出来的而不是真实的画出来的.

举个栗子,我们的最终目标是一个台球,我们就需要先画出一个椭圆形然后使用canvas api给这个椭圆加上线,经过变色过程我们就得到一个台球了.

以下主要列举了canvas画海报的一些总结

1.声明canvas方式不同:

之前是通过<canvas canvas-id="canvas" style="width: 100%; height: 100%;"></canvas>的方式创建canvas的,现在使用的canvas是<canvas id="myCanvas" style="position: absolute;top: 0;left: 0;" width="750" height="1206"></canvas>这样创建的.

2.加载图片,避开createImage这个API:

老画布api实现了微信推荐的直接拉取图片到canvas绘制,因此可以使用var image = canvas.createImage()的方式来拉取图片,但是新版canvas是直接不提供此api的,因此要加载图片,只能使用<image/>标签加载,通过图片的onload的回调函数去拉取图片,给canvas的图片赋值.

3.微信小程序canvas画海报像素设置的不同:

新版的canvas和老版本的canvas在像素上的设置也是不同的,因为小程序的实际屏幕比设置的屏幕小很多,所以老版本的canvas的屏幕宽为750,实际宽是375,而新版的canvas的屏幕宽为750,实际宽也是750,老版的canvas因此可以画出两倍大小的图,新版本的canvas却画不出这么大的图.如果想要使用新版的canvas画海报,需要在html里设置canvas的宽和高,不设置的话默认只有100*100,而且还必须是绝对定位,否则不会显示出来.

4.图片裁剪后的优化:

原来使用canvas2D画海报的时候,图片裁剪后,想要获取裁剪后的图片,需要使用wx.canvasToTempFilePath(Object object)这个api,他需要一个dom对象作为参数,他的返回值是裁剪后的图片的路径,但是在使用老的canvas实现时,获取裁剪后的图片非常方便,直接使用canvas.toTempFilePath就可以获取到裁剪后的图片的路径了.