请问微信小程序image设置了mode=‘aspectFill’，canvas怎么画出这效果？

要知道原图穗态片的长宽

要知道canvas的长宽

算出比例。先要判断原图片的宽度是不是大于高度，如明镇果宽度大于高度，那么计算比例是canvas的宽度 / 原图片宽度 = 比例，假设原图宽度770，高度590，canvas是宽度600，高度300，那么比例就是 600 / 770 = 0.7792207792207793，用原图片激族粗的宽度乘以这个比例得出来就是600，770 * 0.7792207792207793 = 600，然后乘以高度 590 * 0.7792207792207793 = 459.7402597402598。如果高度比宽度的值大就把canvas的高度 / 原图片高度，最后用得出来的比例计算canvas高度和宽度。

用drawImage写入到canvas上。

微信小程序最近火了，大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢，面对不同的手机屏幕，微信

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应,

微信小程序尺寸单位rpx以及样式

rpx单位是微信小程序中css的尺寸单位，rpx可以顷埋指根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在

iPhone6

上，屏幕宽度为375px，共有750个物理像素，则750rpx

=

375px

=

750物理像素，1rpx

=

0.

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏雀配幕宽度进行自适应。规定屏幕宽液哗为750rpx。

如在

iPhone6

上，屏幕宽度为375px，共有750个物理像素，则750rpx

=

375px

=

750物理像素，1rpx

=

0。

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在

iPhone6

上，屏幕宽度为375px，共有750个物理像素，则750rpx

=

375px

=

750物理像素，1rpx

=

0.5px

=

1物理像素。

设备 rpx换算px

(屏幕宽度/750) px换算rpx

(750/屏幕宽度)

iPhone5 1rpx

=

0.42px 1px

=

2.34px

iPhone6 1rpx

=

0.5px 1px

=

2rpx

iPhone6s 1rpx

=

0.552px 1px

=

1.81rpx

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem:

规定屏幕宽度为20rem；1rem

=

(750/20)rpx

注：开发微信小程序时设计师可以用

iPhone6

作为视觉稿的标准。

感谢大家阅读，希望能帮助到大家，谢谢大家对本站的支持！

---