挖坑指南: 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/[email protected]">
<canvas id="canvas">canvas>

*{
  margin: 0;
  padding: 0;
}
#canvas{
  width: 100%;
  height: 100vh;
}
#tulip{
  width: 100%;
}

document.getElementById("canvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
// (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// 1125为图片的原始宽度, 2001为图片的原始高度; iphone6模式
ctx.drawImage(img, 0, 0, 1125, 2001, 0, 0, 375, 667);

再来看一下翻车现场

• 原图
  
• 翻车
  
  这几个属性研究来研究去, 位置换来换去, 数值改来改去, 也没得出个所以然…
  但是、但是, 在找资料的时候, 看到了张鑫旭大神的文章, 那个标题一下就把我打败了

不看不知道, 一看吓一跳

• canvas 元素是 可替换元素, 有默认的宽高属性(此属性与 css 样式中的 width 和 height 不同), 默认 300px*150px
• canvas 的绘制宽高取决于它的宽高属性, 与 css 样式中的宽高无关

再过来看看我们的问题

• 未给 canvas 声明宽和高, 所以绘制区域的大小默认是 300px*150px
• 将 1125px*2001px 的内容绘制在 300px*150px 的区域中, 然后将它的 css 展示大小设置 375px*667px

解决方案

给 canvas 显式地设置宽高属性, 根据需要, 可以设置为 屏幕宽高 * 屏幕像素比, 让其在高清屏上更清晰
在微信小程序中, canvas 没有宽高属性, 所以直接设置 css 样式中的 width 和 height 是可以的

var c=document.getElementById("canvas");
c.setAttribute('width', 375*2);
c.setAttribute('height', 667*2);
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
// (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.drawImage(img, 0, 0, 1125, 2001, 0, 0, 375*2, 667*2);

最终效果

扩展阅读

• canvas HTML属性尺寸和CSS尺寸多个细节深入
• 可替换元素

总结

嘘寒问暖 不如打笔巨款~