04 canvas——位移画布和旋转缩放

Posted 2020-09-28 Nicole

4.1 缩放

• scale() 方法缩放当前绘图，更大或更小

• 语法：context.scale(scalewidth,scaleheight)

• scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

• scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

• 注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小

4.2 位移画布

• ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置

• x： 添加到水平坐标（x）上的值

• y： 添加到垂直坐标（y）上的值

• 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响

• 位移画布一般配合缩放和旋转等

4.3 旋转

• context.rotate(angle); 方法旋转当前的绘图

• 注意参数是弧度（PI），如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算

4.4 绘制环境保存和还原

• ctx.save() 保存当前环境的状态

• 可以把当前绘制环境进行保存到缓存中。

• ctx.restore() 返回之前保存过的路径状态和属性

• 获取最近缓存的ctx

• 一般配合位移画布使用

4.5 设置绘制环境的透明度（了解）

• context.globalAlpha=number;

• number:透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间

• 设置透明度是全局的透明度的样式

案例：

<div>
        <canvas id="canvas">
            您当前浏览器不支持canvas，请升级浏览器
        </canvas>
 </div>

<script>
        (function () {
            var canvas = document.querySelector(‘#canvas‘);
            var ctx = canvas.getContext(‘2d‘);
            canvas.width = 600;
            canvas.height = 600;
            canvas.style.border = "1px solid #000";

            /*状态ctx1*/
            ctx.fillStyle = ‘red‘;
            ctx.fillRect(10,10,100,100);

            ctx.save();/*保存状态1*/

            /*新的状态ctx2*/
            ctx.translate(200,200);//把整个画布位移到（200,200）
             ctx.rotate(30*Math.PI/180);//把整个画布旋转30度
             ctx.scale(2,2);//把整个画布放大x和y方向各2倍
             ctx.globalAlpha = .3;//设置透明度
             ctx.fillStyle = ‘skyblue‘;
            ctx.moveTo(0,0);
            ctx.lineTo(400,0);
            ctx.moveTo(0,0);
            ctx.lineTo(0,400);
            ctx.stroke();
            ctx.fillRect(10,10,40,40);

            ctx.restore();//把上次保存的状态1还原
            /*状态1开始*/
            ctx.fillRect(150,100,100,100);

        })();
    </script>