学习Canvas基础-位移、缩放、旋转

一、 translate()

方法对当前网格添加平移变换的方法
ctx.translate(x, y)
translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换
参数
x——水平方向的移动距离。
y——垂直方向的移动距离。
事例

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>/** @type {HTMLCanvasElement} *///  获取canvas画布const canvas=document.querySelector('#cont')// 获取画布的应用上下文const ctx =canvas.getContext('2d')// 标记画布原点ctx.beginPath()ctx.fillStyle = 'black'ctx.arc(0, 0, 10, 0, Math.PI * 2)ctx.fill()ctx.closePath()ctx.beginPath()// translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离ctx.translate(250, 200)ctx.fillStyle = 'red'ctx.arc(0, 0, 10, 0, Math.PI * 2)ctx.fill()ctx.closePath()// 由此证明translate移动API是移动的画布位置原点实现位移。</script>

二、scale()

根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。
void ctx.scale(x, y)
默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。
参数
x——水平方向的缩放因子
y——垂直方向的缩放因子
事例

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>/** @type {HTMLCanvasElement} *///  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')// 绘制矩形ctx.beginPath()ctx.fillStyle = 'red'ctx.fillRect(0, 0, 100, 50)ctx.closePath()// 绘制矩形ctx.beginPath()// translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离ctx.translate(250,200)// scale(X,Y),X代表水平方向缩放比例，Y代表垂直方向缩放比例，ctx.scale(2,2)ctx.fillStyle = 'blue'ctx.fillRect(0, 0, 100, 50)ctx.closePath()</script>

rotate()

在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
ctx.rotate(angle)
参数
angle
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>/** @type {HTMLCanvasElement} *///  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')// 标记画布原点ctx.beginPath()ctx.fillStyle = 'black'ctx.arc(0, 0, 10, 0, Math.PI * 2)ctx.fill()ctx.closePath()// translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离ctx.translate(250, 200)// 绘制一个坐标系ctx.beginPath()ctx.strokeStyle = 'red'ctx.moveTo(-100, 0)ctx.lineTo(200, 0)ctx.lineTo(190, -10)ctx.moveTo(200, 0)ctx.lineTo(190, 10)ctx.moveTo(0, -100)ctx.lineTo(0, 200) ctx.lineTo(-10, 190)ctx.moveTo(0, 200)ctx.lineTo(10, 190)ctx.stroke()ctx.closePath()// rotate(顺时针旋转的弧度)ctx.rotate(Math.PI / 4)// 绘制一个坐标系ctx.beginPath()ctx.moveTo(-100, 0)ctx.lineTo(200, 0)ctx.lineTo(190, -10)ctx.moveTo(200, 0)ctx.lineTo(190, 10)ctx.strokeStyle = 'black'ctx.moveTo(0, -100)ctx.lineTo(0, 200)ctx.lineTo(-10, 190)ctx.moveTo(0, 200)ctx.lineTo(10, 190)ctx.stroke()ctx.closePath()</script>

四、总结

rotate() scale() translate() 这三个方法都是对canvas坐标系进行缩放、移动、旋转而展现效果的。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！