变形

Canvas中变形是一种强大的方法，可以将原点移动到另一点、对网格进行旋转和缩放。

移动

ctx.translate（x，y）可以移动原点的位置。

X是左右偏移量，y是上下偏移量

canvas 变形 - 图1

旋转

ctx.rotate(angle）可以以原点为中心旋转canvas。旋转的角度（angle），它是顺时针方向的，以弧度为单位的值。

canvas 变形 - 图2

缩放

ctx.scale（scalewidth,scaleheight）可以缩放当前绘图，更大或更小。

参数：都是数字，表示缩放的宽度和高度的倍数。

如果对绘图进行缩放，所有之后的绘图也会被缩放，定位也会被缩放。

<!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; background: url(images/bg.png); } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 // 移动坐标轴，原点 // ctx.translate(200, 200) // 旋转 // ctx.rotate(1) // 将属性值存储到变量中 // var x = 150 // var y = 150 // var w = 200 // var h = 200 // 效果：让矩形看起来围绕自己的中心点旋转 // 1.改变原点位置 // ctx.translate(x + w / 2, y + h / 2) // // 3.旋转坐标轴 // ctx.rotate(1) // // 绘制矩形 // // ctx.fillRect(100, 100, 100, 100) // // 2.改变图形的顶点位置 // ctx.fillRect(-w / 2, -h / 2, w, h) // 绘制矩形 ctx.lineWidth = 2 ctx.strokeRect(100, 100, 50, 50) // 缩放效果 ctx.scale(2, 2) ctx.strokeRect(100, 100, 50, 50) ctx.scale(2, 2) ctx.strokeRect(100, 100, 50, 50) </script> </body> </html>