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,是每一块大小。

然后得到
图片描述

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

canvas html5 JavaScript

ㄣ儱メ崎こ 9 years, 10 months ago

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

身体变的好奇怪 answered 9 years, 10 months ago

Your Answer