微信小程序---canvas

canvas官网：CanvasRenderingContext2D.canvas - Web APIs | MDN

小程序-canvas组件：canvas | 微信开放文档

1、两种cavnas获取上下文方式

老版本 createCanvasContext 方式

createCanvasContext是微信提供的获取 canvas实例的老得接口，使用方式如下。

wxml

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>

美好的一天从写一个hello,world开始。

js中这么写

onReady(){/*  使用 wx.createContext 获取绘图上下文 context ， firstCanvas 与 canvas 属性中的canvas-id一一对应  */const context = wx.createCanvasContext('firstCanvas')/* 设置字体大小 */context.setFontSize(20) /* 设置字体颜色 */context.setFillStyle('pink')/* 设置文本内容,位置 */context.fillText('hello,world', 0, 0)context.draw()
}

老版本是使用createCanvasContext传入 canvas标签中的 canvas-id属性，来获取canvas实例，老版本的使用起来说实话，不够灵活，很多对canvas线条，颜色的设置，都封装成方法了,每次改变需要调用方法。

新版本 getContext 上下文方式（2.9.0）

新的方式，则是先通过 createSelectorQuery 获取 canvas 元素节点, 然后通过 getContext 获取上下文。

wxml

 <canvas type="2d" id="myCanvas"></canvas>

const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({node: true,size: true
})
.exec((res)=>{const { node } = res[0]if (!node) return/* 获取 canvas 实例 */const context = node.getContext('2d')context.fillStyle = 'pink'/* 设置字体样式 大小 字体类别 */context.font = 'normal 400 12px PingFangSC-Regular',context.fillText('hello,world', 0, 0)
})

这种方式和第一种 createSelectorQuery 方式，在api使用方式上会有微妙的差别，这种写法更像原生的DOM写法，设置颜色，样式，直接改变context属性，而不再需要调用对应的api。

1、关于canvas 宽高以及缩放比问题，绘制的元素变形，画布的高度真得等于cavans标签设置的宽高么？

容器宽高: 我们给canvas标签设置的宽高,就是如上代码中的 canvasStyle,是canvas容器的宽高。

画布宽高: 而我们画布的宽高，在新版本api中，是通过获取node节点，动态设置的node.width 和 node.height的值。

容器宽高≠画布宽度

小程序的canvas画布有一个原始的画布宽高，以及缩放比，而且是按照一倍像素来的，当我们给canvas容器设定容器宽高之后，如果没有对应设置canvas画布的画布宽高以及scale，画出的画布就会严重的变形。如果我们期望将整个屏幕作为画布，对于不同手机，屏幕尺寸都会有差别，所以要动态获取设备的宽高。

2、canvas绘制图片

api-drawImage:CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight) | 微信开放文档

网络图片: 首先需要通过getImageInfo来获取图片的临时路径。用getImageInfo绘制网络资源的时候请注意配置一下合法的下载域名，要不然我们是无法成功获取图片信息的。我们首先需要在小程序后台配置downloadFile合法域名。

api-getImageInfp:wx.getImageInfo(Object object) | 微信开放文档

/* backGroundImageUrl 是我们要画的网络图片的地址  */this.getImageInfo(backGroundImageUrl).then(res=>{const {width,   /* 宽度 */height,  path     /* 临时路径 */} = res1/* 第二步: 绘图 */this.drawImage(context, node, path, 0, 0, width, height, 0, 0, 0, 0)})

本地图片: 直接通过canvas提供的drawImage进行绘制。

const image = node.createImage();
image.src = url image.onload = () => {         context.drawImage(image,x,y,width,height,dx,dy,dwidth,dheight)
}

canvas怎么绘制叠在一起的两张图片，并控制层级？

首先想到的是层级问题，我们期望背景图片放在下面，但是在画布中没有控制zIndex层级的属性。实际在canvas中，绘制的先后顺序 就是画布层级顺序，后画的在先画的上层，那么对于这种层级问题呢，我们只要保证层级高的元素后画，层级低的元素先画就可以完美解决。

3、如何用canvas绘制，多行文本？

一个一个字的绘制到canvas中，然后把每个字的宽度相加，如果总宽度大于容器宽度，就另取一行从新绘制

       /** 画多行文本* @param ctx          canvas 上下文* @param str          多行文本* @param initHeight   容器初始 top值* @param initWidth    容器初始 left值* @param canvasWidth  容器宽度*/drawRanksTexts(ctx, str, initHeight, initWidth, canvasWidth) {let lineWidth = 0;let lastSubStrIndex = 0;/* 设置文字样式 */ctx.fillStyle = "#303133"ctx.font = 'normal 400 15px  PingFangSC-Regular'for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).widthif (lineWidth > canvasWidth) { /* 换行 */ctx.fillText(str.substring(lastSubStrIndex, i), initWidth, initHeight)initHeight += 20lineWidth = 0lastSubStrIndex = i}if (i == str.length - 1) {  /* 无需换行 */ctx.fillText(str.substring(lastSubStrIndex, i + 1), initWidth, initHeight)}}},

调用

/* TODO: 复制多行文本 */
const rowsText = await this.geDomPostion('#context', true)
this.drawRanksTexts(context, this.skuName, rowsText.top, rowsText.left, rowsText.width)

4、保存海报

把当前画布指定区域的内容导出生成指定大小的图片

api-canvasToTempFilePath:wx.canvasToTempFilePath(Object object, Object this) | 微信开放文档

保存图片到系统相册

api-saveImageToPhotosAlbum:wx.saveImageToPhotosAlbum(Object object) | 微信开放文档

作者：我不是外星人
链接：https://juejin.cn/post/6930404573043490830
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

微信小程序---canvas相关推荐

【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件效果图 index.wxml文件 <canvas type="2d" id="can ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
微信小程序canvas实现简易手写签名版（uni-app）
微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为3 ...

微信小程序---canvas

微信小程序---canvas相关推荐

最新文章

热门文章