详细说明如何使用HTML5画布API控制图片的缩放变换。
标度变换尺度（SX，SY）引入两个参数，分别是缩放倍的物体在水平方向和垂直方向，分别。例如，context.scale（2,2）是两倍的放大倍率的图像。事实上，它看起来简单，在实际使用中也存在一些问题吧。在一段代码看：Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
标度变换
体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；
context.strokestyle =红色；
context.linewidth = 5；
对于（var i = 1；i < 4；i + +）{
context.save（）；
context.scale（I，I）；
（5050150100）context.strokerect；
context.restore（）；
}
}；
运行结果：
事实上，缩放非常简单，更复杂的是如何使鼠标成为放大或缩小的中心。如果数学几何不好，公式可能不被理解。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
帆布。onmousewheel =帆布。轮=功能（事件）{ / /浏览器火狐浏览器的兼容性
VaR POS = windowtocanvas（帆布，event.clientx，事件。clienty）；
事件。wheeldelta = event.wheeldeltaevent.wheeldelta：（事件。deltay *（40））；
如果（事件。wheeldelta > 0）{
imgscale * = 2；
imgx = imgx * 2-pos.x；
imgy = imgy * 2-pos.y；
其他{ }
imgscale / = 2；
imgx = imgx * 0.5 + pos.x * 0.5；
imgy = imgy * 0.5 + pos.y * 0.5；
}
DrawImage（）；
}
这时，基本功能就实现了。加载图片和加载多个图片几乎是一样的，保持每个图片的位置和大小。接下来，我们需要对代码进行排序。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
上下文画布；
/ / var IMG图像对象
imgisloaded，图像是否加载 / /；
imgx = 0，
imgy = 0，
imgscale = 1；
（int（）{函数
画布document.getelementbyid（'canvas）；
背景canvas.getcontext（二维的）；
LoadImg（）；
}）；
功能loadimg（）{
img =新的图像（）；
IMG。指针函数（）{
imgisloaded =真；
DrawImage（）；
}
img src=地图。JPG；
}
功能DrawImage（）{
context.clearrect（0,0，canvas.width，帆布，高度）；
context.drawimage（IMG，0,0，img.width，img.height，imgx，imgy，IMG。宽*高* imgscale imgscale，IMG公司。）；
}
帆布。onmousedown =函数（事件）{
VaR POS = windowtocanvas（帆布，event.clientx，事件。clienty）；
帆布。移动鼠标=函数（事件）{
画布。样式；
VaR pos1 = windowtocanvas（帆布，event.clientx，事件。clienty）；
var x = x-pos.x pos1；
var y = pos1。y-pos.y；
POS = pos1；
imgx + = x；
imgy + = Y；
DrawImage（）；
}
帆布。onmouseup =函数（）{
移动鼠标=空画布；
帆布。onmouseup = null；
画布。样式；
}
}
帆布。onmousewheel =帆布。轮=功能（事件）{
VaR POS = windowtocanvas（帆布，event.clientx，事件。clienty）；
事件。wheeldelta = event.wheeldeltaevent.wheeldelta：（事件。deltay *（40））；
如果（事件。wheeldelta > 0）{
imgscale * = 2；
imgx = imgx * 2-pos.x；
imgy = imgy * 2-pos.y；
其他{ }
imgscale / = 2；
imgx = imgx * 0.5 + pos.x * 0.5；
imgy = imgy * 0.5 + pos.y * 0.5；
}
DrawImage（）；
}
功能windowtocanvas（帆布，x，y）{
VaR BBOX = canvas.getboundingclientrect（）；
返回{
X：X bbox.left -（bbox.width帆布。宽度） / 2，
Y：Y bbox.top -（bbox.height帆布。高度） / 2
}；
}
结垢改造应注意的问题
看看上面的例子，你的结果一定有点奇怪，一个是左上角的坐标是变化的，而是线的粗细，所以要注意缩放变换的问题。
缩放时，图像左上角的位置也会放大。
缩放时，图像的线条粗细也会放大。
例如，对于最小的原始矩形，它的左上角的坐标是（50, 50）。线的宽度是5px，但当放大倍数为2倍，左上角坐标变为100100，线的宽度成10px。这是尺度变换的副作用。
孩子们一定期待我说解决副作用的方式。不幸的是，有没有什么好的办法来解决这些副作用。如果你想解决左上角的坐标，你可以把左上角的坐标为（0, 0），所以不管是什么倍数，0乘以0，它将保持不变。如果你不想改变的线路，不使用线。或封装的函数自己，不使用量表（）。
我们曾经说过，平移变换、旋转变换、尺度变换都属于坐标变换，或者说是画布变换，因此，缩放不是图像，而是整个坐标系，整个画布！它就像坐标系单位距离的刻度，所以坐标和线会被放大。仔细想想，它看起来很神奇。