javascript - html5 中 canvas drawImage 无法缩放图片
大家讲道理
大家讲道理 2017-04-10 15:40:47
[JavaScript讨论组]

我想在手机游览器上开发一个简单的拼图游戏。因此使用了canvas

由于手机尺寸问题,我先要将图片适当的缩放。

width = screen.width-(2*CANVASMARGIN);
height = 336*(width/500);
var _img = new Image(width,height);
_img.src = "pic.jpg";

不用关心,缩放的逻辑,只需要注意到,我这边是进行了缩放。
然后我在画在canvas上。

_stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight);

这样能够完好运行起来,

然后我将图片裁剪,得到每个piece。
再绘画到canvas上

`stage.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, xPos, yPos,pieceWidth,pieceHeight);`
其中,
_img是图像,
piece.sx和piece.sy是,每一片位于原图的位置
xPos和yPos是,要将该piece放置在canvas的那一个位置上。
pieceWidth,pieceHeight,是每一块大小。

然后得到

好像每一块都没有进行缩放,得到的原来的图像大小的分块。
我该怎么解决?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(1)
伊谢尔伦

缩放就是吧原图指定区域上的像素点绘制到另一个区域上,如果2区域大小相同,就是简单赋值
如果新的区域比原来区域大,看到的就是放大的效果
如果比园区与小,那么就是缩小的效果,
关键在于前后2个区域的大小

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号