【HTML5绘画与动画】图形变形 1.保存和恢复状态 2. 清除画布 3. 移动坐标 4. 旋转坐标 5. 缩放图形 6.变换图形

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

 

目录：

1.保存和恢复状态　　2. 清除画布　　3. 移动坐标　　4. 旋转坐标　　5. 缩放图形　　6.变换图形

 

1.保存和恢复状态

① 绘制一个矩形，填充颜色为 #ff00ff, 轮廓颜色为蓝色，然后保存这个状态，再绘制另一个矩形，填充颜色为 #ff0000, 轮廓颜色为绿色，最后恢复为第一个矩形的状态，并绘制两个小的矩形，此时已经恢复了原来保存的状态，所以会沿用最先设定的属性值。

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //开始绘制矩形
        ctx.fillStyle = "#ff00ff";
        ctx.strokeStyle = "blue";
        ctx.fillRect(20, 20, 100, 100);
        ctx.strokeRect(20, 20, 100, 100);
        ctx.fill();
        ctx.stroke();
        //保存当前 canvas 状态
        ctx.save();       //save() : 将当前的状态推送到栈中保存  
        //绘制另一个矩形
        ctx.fillStyle = "#ff0000";
        ctx.strokeStyle = "green";
        ctx.fillRect(140,20,100,100);
        ctx.strokeRect(140,20,100,100);
        ctx.fill();
        ctx.stroke();
        //恢复第一个矩形的状态
        ctx.restore();　　//restore() : 将上一个保存的状态从栈中弹出，恢复上一次所有的设置  
        //绘制两个矩形
        ctx.fillRect(20,140,50,50);
        ctx.strokeRect(80,140,50,50);   
    }
</script>

页面表现：

 

2. 清除画布　　

① 使用 clearRect() 方法擦除画布中的绘图

用法 ： clearRect( x, y, width, height ) ,参数说明：

x : 要清除的矩形的左上角的 x 坐标　　　　y : 要清除的矩形左上角的 y 坐标

width : 要清除的矩形的宽度，以像素计　　height : 要清除的矩形的高度，以像素计

语句：

<canvas id="canvas" width="300" height="200" style="border:solid 1px #999;"></canvas>
<input name="" type="button" value="清空画布" onclick="clearMap();" >
<script>
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.strokeStyle = "#ff00ff";
    ctx.beginPath();
    ctx.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
    ctx.stroke();
    function clearMap(){
        ctx.clearRect(0,0,300,200); //使用 clearRect() 方法来清空画布 
    }
</script>

页面表现：

  点击按钮之后：

 

 

3. 移动坐标　　

① 综合运用 save()、restore()、translate() 方法来绘制一个伞状图形。

在默认情况下，以画布左上角（0，0）为绘图原点，使用translate()方法可以移动坐标原点，绘图时以新的坐标为绘图原点。

语句：

<canvas id="canvas" width="700" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //注意：所有的移动都是基于这一上下文
        ctx.translate(40,80); 
        for( var i=0; i<10; i++ ){
            ctx.save();　　//使用 save() 方法保存画布的原始状态
            ctx.translate(60*i, 0);
            drawTop(ctx, "rgb("+(30*i)+","+(255-30*i)+",255)");
            drawGrip(ctx);
            ctx.restore();　　//使用 restore() 方法恢复原始状态
        }
    }
    //绘制伞形顶部半圆
    function drawTop(ctx, fillStyle){
        ctx.fillStyle = fillStyle;
        ctx.beginPath();
        ctx.arc(0, 0, 30, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();
    }
    //绘制伞形底部手柄
    function drawGrip(ctx){
        ctx.save();
        ctx.fillStyle = "blue";
        ctx.fillRect(-1.5, 0, 1.5, 40);
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.arc(-5, 40, 4, Math.PI, Math.PI*2, true);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    
</script>

页面表现：

效果说明：

 

 

4. 旋转坐标　　

① 在每次开始绘制图形之前，先把坐标控件旋转 PI*( 2/4 + i/4 )，再将坐标空间沿y轴负方向移动100，然后开始绘制图形，从而实现使图形沿一中心点平均旋转分布。

用法：context.rotate( angle ) ,参数说明：angle为旋转角度，旋转角度为顺时针

将角度转换为弧度公式 ： degress * Math.PI / 180

语句：

<canvas id="canvas" width="300" height="300" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //注意：所有的移动都是基于这一上下文
        ctx.translate(150,150); 
        for( var i=0; i<9; i++ ){
            ctx.save();     //使用 save() 方法保存画布的原始状态
            ctx.rotate(Math.PI*(2/4+i/4));  //使用 rotate()方法 可以以原点为中心旋转 canvas 上下文对象的坐标空间   
            ctx.translate(0, -100);
            drawTop(ctx, "rgb("+(30*i)+","+(255-30*i)+",255)");
            drawGrip(ctx);
            ctx.restore();  //使用 restore() 方法恢复原始状态
        }
    }
    //绘制伞形顶部半圆
    function drawTop(ctx, fillStyle){
        ctx.fillStyle = fillStyle;
        ctx.beginPath();
        ctx.arc(0, 0, 30, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();
    }
    //绘制伞形底部手柄
    function drawGrip(ctx){
        ctx.save();
        ctx.fillStyle = "blue";
        ctx.fillRect(-1.5, 0, 1.5, 40);
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.arc(-5, 40, 4, Math.PI, Math.PI*2, true);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    
</script>

页面表现：

② 简单的例子

语句：

<canvas id="canvas" width="200" height="200" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var canvas = document.getElementById('canvas');
    //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境
    if(canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.rotate(Math.PI*45/180);
        ctx.fillRect(50,20,30,20);
    } 
}
</script>

页面表现：

效果说明：

 5. 缩放图形　　

scale (x, y) ，参数说明：

x：横轴的缩放因子  y： 纵轴的缩放因子

x 跟 y 必须为正值，需要放大图形参数大于1，需要缩小图形参数小于1

①

语句：

<canvas id="canvas" width="400" height="350" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //注意：所有的移动都是基于这一上下文
        ctx.translate(200, 20);
        for( var i=0; i<80; i++ ){
            ctx.save();
            ctx.translate(30, 30);
            ctx.scale(0.95, 0.95);  //缩小图形到上次的 0.95 倍
            ctx.rotate(Math.PI/12); //旋转 15 度
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.globalAlpha = "0.4";    //设置透明度
            ctx.arc(0,0,50,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
        }
    }
</script>

页面表现：

 6.变换图形

①

语句：

<canvas id="canvas" width="400" height="350" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //注意：所有的移动都是基于这一上下文
        ctx.translate(200, 20);
        for( var i=1; i<90; i++ ){
            ctx.save();
            ctx.transform(0.95, 0, 0, 0.95, 30, 30);    
            ctx.rotate(Math.PI/12); 
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.globalAlpha = "0.4";
            ctx.arc(0, 0, 50, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.fill();
        }
        //恢复最初的原点，然后讲原点改为（10，10）
        ctx.setTransform(1, 0, 0, 1, 10, 10);
        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, 50, 50);
        ctx.fill();
    }
</script>

页面表现：

 ② transform 方法可替代 tranlate

代码第 8 行跟第 9 行效果相同。

语句：

<canvas id="canvas" width="100" height="100" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //注意：所有的移动都是基于这一上下文
        //ctx.translate(10, 10);
        ctx.transform( 0, 1, 1, 0, 10, 10); 
        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, 20, 20);
    }
</script>

页面表现：

③ transform方法可替代 scale

语句：

<canvas id="canvas" width="200" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillStyle = "blue";
        //ctx.scale(0.5, 0.5);
        ctx.transform(0.5, 0, 0, 0.5, 0, 0);
        ctx.fillRect(10, 10, 180, 180);
    }
</script>

页面表现：

 

④ transform 方法可替代 rotate 方法（替代之后发现效果有点差别）

用法：context.transform(cosθ， sinθ, -sinθ, cosθ, 0, 0 ) , 参数说明：

θ为旋转角度的弧度值

语句：

<canvas id="canvas" width="200" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillStyle = "blue";
        //ctx.rotate(45*Math.PI/180);
        ctx.transform(Math.PI/2, Math.PI/2, -Math.PI/2, Math.PI/2, 0, 0);
        ctx.fillRect(0, 0, 100, 0.3);
    }
</script>

页面表现：

　　使用 transform 方法：

　　

 

　　使用 rotate 方法：