首页 > html5 中 canvas drawImage 无法缩放图片

html5 中 canvas drawImage 无法缩放图片

我想在手机游览器上开发一个简单的拼图游戏。因此使用了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,是每一块大小。

然后得到

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


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

【热门文章】
【热门文章】