【canvas】变换丶位移画布丶 旋转丶环境保存和还原丶透明度丶 缩放(重点)

## 3.3 变换（重点）
### 3.3.1 缩放（重点）
+ scale() 方法缩放当前绘图，更大或更小
+ 语法：context.scale(scalewidth,scaleheight)
* scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
* scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
+注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

 

### 3.3.2 位移画布（重点）
+ ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
+ 参数说明：
* x： 添加到水平坐标（x）上的值
* y： 添加到垂直坐标（y）上的值
+ 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
+ 位移画布一般配合缩放和旋转等。

 

 

### 3.3.3 旋转（重点）
+ context.rotate(angle); 方法旋转当前的绘图
+ 注意参数是弧度（PI）
+ 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

 

 

 

## 3.3 绘制环境保存和还原（重要）
+ ctx.save() 保存当前环境的状态
* 可以把当前绘制环境进行保存到缓存中。
+ ctx.restore() 返回之前保存过的路径状态和属性
* 获取最近缓存的ctx
+ 一般配合位移画布使用。

 

## 3.4 设置绘制环境的透明度（了解）
+ context.globalAlpha=number;
+ number:透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
+ 设置透明度是全局的透明度的样式。注意是全局的。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas width="600"  height="400" >
        
    </canvas>
</body>
    <script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="solid 1px #000";
    var c=canvas.getContext('2d');
    c.fillStyle="rgb(255,0,0)";
    c.fillRect(10,10,100,100);
    c.save();//保存当前环境的状态


    c.translate(100,100);//方法重新映射画布上的 (100,100) 位置
    //发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
    //位移画布一般配合缩放和旋转等。

    c.globalAlpha=0.3;
    //透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间,注意参数是弧度（PI）,
    // 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算.


    c.scale(2,2);//方法缩放当前绘图，更大或更小


    c.rotate(25*Math.PI/180);// 方法旋转当前的绘图


    c.moveTo(0,0);
    c.lineTo(500,0);
    c.moveTo(0,0);
    c.lineTo(0,300);
    c.stroke();
    c.fillRect(10,10,100,100);

    c.restore();//返回之前保存过的路径状态和属性

    c.fillRect(200,200,100,100);


    </script>
</html>

代码结果:

 

posted @ 2017-08-14 11:58  丰study  阅读(395)  评论(0)    收藏  举报