挖坑指南: canvas元素的宽高属性和css中的宽高(大型翻车现场..)

原文链接

前言

在微信小程序中做分享海报, 需要绘制 canvas，设置图片 100% 占满元素, 作为海报的背景。

开始

文档翻一翻, canvas.drawImage() 一把梭, 呃呃呃…发现背景图片没有按照原图 100% 平铺, 而是只取了部分, 变形了

实践

装X失败, 还是仔仔细细看看文档
drawImage(image sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
先来分析以下这些参数的含义吧~ 和 h5 中的参数是一致的

• sx 源图像的矩形选择框的左上角 x 坐标
• sy 源图像的矩形选择框的左上角 y 坐标
• sWidth 源图像的矩形选择框的宽度
• sHeight 源图像的矩形选择框的高度
• dx 图像的左上角在目标 canvas 上 x 轴的位置
• dy 图像的左上角在目标 canvas 上 y 轴的位置
• dWidth 在目标画布上绘制图像的宽度, 允许对绘制的图像进行缩放
• dHeight 在目标画布上绘制图像的高度, 允许对绘制的图像进行缩放
  看完是不是[黑人问号.jpg]， whatttt…???
  上图上图
  
  再看看我们失败的代码(此处使用普通h5作为演示)

<img id="tulip" src="/share/img/bg-second@3x.png">