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,是每一块大小。
然后得到
好像每一块都没有进行缩放,得到的原来的图像大小的分块。
我该怎么解决?
ㄣ儱メ崎こ
9 years, 9 months ago