canvas 图片不能缩放显示在画布的问题忘记设置dw，dh

最新推荐文章于 2022-12-31 13:40:23 发布

转载最新推荐文章于 2022-12-31 13:40:23 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/FineDay/articles/5421663.html

文章标签：

#游戏 #javascript #ViewUI

本文介绍了在制作红包效果时，如何正确使用canvas的drawImage方法来缩放和定位图片。通过详细解释drawImage的不同参数组合，帮助读者理解如何精确控制图片在画布上的显示。

　　在制作红包效果时，new image显示的图片由于没有设置drawImage的dw,dh,图片没有缩放在画布。是对drawImage没有认识好

context.drawImage(img,x,y)

context.drawImage(img,x,y,dw,dy)

context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

第一个参数image是要绘制的对象，这个参数可以是HTMLImageElement、HTML-CanvasElement或者HTMLVideoElement，dx、dy是image在Canvas中定位的坐标值，dw、dh表示image在Canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值，sx、sy是image所要绘制的起始位置，sw、sh表示image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。表示从sx,sy 取sw,sh的宽高图片部分，在dx，dy位置，显示dw，dh的宽高

转载于:https://www.cnblogs.com/FineDay/articles/5421663.html