小程序问题
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].width const renderHeight = res[0].height // 初始化画布大熊啊 // const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = renderWidth*ratio canvas.height = renderHeight*ratio ctx.scale(ratio, ratio) //画布背景色 ctx.fillStyle="#ffffff" ctx.fillRect(0,0,canvas.width, canvas.height) //画图片 const image = canvas.createImage() image.crossOrigin = "Anonymous" // 亚跨域使用 image.src = imageCover image.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: ‘愉快’
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。