1.获取节点
wx.createSelectorQuery()
wx.createSelectorQuery().in(this) //组件中加in(this)，不然获取不到
2.使用实例
wx.createSelectorQuery().in(this).select('#share').fields({node: true,size: true}).exec(async (res) => {const canvas = res[0].node;// Canvas 绘制上下文const ctx = canvas.getContext('2d');// let dpr = this.data.dpr//画布大小根据屏幕分辨率进行缩放，防止模糊const renderWidth = res[0].widthconst renderHeight = res[0].height// 初始化画布大熊啊// const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = renderWidth*ratiocanvas.height = renderHeight*ratioctx.scale(ratio, ratio)//画布背景色ctx.fillStyle="#ffffff"ctx.fillRect(0,0,canvas.width, canvas.height)//画图片const image = canvas.createImage()image.crossOrigin = "Anonymous" // 亚跨域使用image.src = imageCoverimage.onload = ()=>{//计算裁剪图片// const imageWidth = image.width// const imageHeight = image.height// const cropRatio = 3/4// const cropWidth = imageWidth * cropRatio// const cropHeight = imageHeight// 计算裁剪的起始位置，这里以居中为例// const startX = (imageWidth - cropWidth) / 2// const startY = (imageHeight - cropHeight) / 2// ctx.drawImage(image, startX, startY, cropWidth, cropHeight, 0, 0, 300, 400)ctx.drawImage(image, 0, 0, 300, 400);}})
填充文字样式
ctx.font= '600 12px PingFang TC'ctx.fillStyle = '#ffffff'ctx.fillText('你好',231,362)
填充文字边框样式
ctx.font= '600 12px PingFang TC'ctx.fillStyle = '#ffffff'ctx.strokeStyle = "#000000";ctx.fillText('你好',231,362)ctx.strokeText('你好',231,362);
计算文字宽度
var metrics = c
ctx.measureText(testLine).width;
3.css文字描边：
-webkit-text-stroke: 1px red; 会使文字越来越瘦，占文字本身的宽度,黑色字体样式会减少
可以使用
data里面设置 textValue: ‘愉快’
<view class="title-greet" data-color="#0C20E9" data-attr-greet="{{textValue}}">{{textValue}}</view>
.title-greet{-webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #fff; -webkit-text-stroke: 4px #fff; position: relative;z-index: 1;
}
.title-greet:after {position: absolute;z-index: 2;left: 0;right: 0;top: 0;-webkit-text-stroke-width: 0px;content: attr(data-attr-greet);color: attr(data-color);
}
