小程序问题 - 技术栈

1.获取节点

wx.createSelectorQuery()

wx.createSelectorQuery().in(this) //组件中加in(this)，不然获取不到

2.使用实例

javascript 复制代码

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);
        }
      })

填充文字样式

javascript 复制代码

 ctx.font= '600 12px PingFang TC'
 ctx.fillStyle = '#ffffff'
 ctx.fillText('你好',231,362)

填充文字边框样式

javascript 复制代码

 ctx.font= '600 12px PingFang TC'
 ctx.fillStyle = '#ffffff'
 ctx.strokeStyle = "#000000";
 ctx.fillText('你好',231,362)
 ctx.strokeText('你好',231,362);

计算文字宽度

var metrics = c

javascript 复制代码

ctx.measureText(testLine).width;

3.css文字描边：

-webkit-text-stroke: 1px red; 会使文字越来越瘦，占文字本身的宽度,黑色字体样式会减少

可以使用

data里面设置 textValue: '愉快'

javascript 复制代码

<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);
}