挖坑指南: 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尺寸多个细节深入
• 可替换元素

总结

嘘寒问暖 不如打笔巨款~