坐标变换

案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            cxt.translate(200,50);
            cxt.fillStyle='rgba(255,0,0,0.25)';
            for(var i=0;i<40;i++)
            {
                cxt.translate(25,25);
                cxt.scale(0.9,0.9);
                cxt.rotate(Math.PI/10);
                cxt.fillRect(0,0,100,50);
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>

</body>
</html>

效果图：

注释：

（1）平移

cxt.translate( x , y );

translate方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素，y表示将坐标轴原点向下移动多少个单位。

（2）扩大

cxt.scale( x , y );

scale方法使用两个参数，x是水平方向的放大倍数，y是垂直方向的放大倍数；将图形缩小的时候，将这两个参数设为0到1之间的小数就可以了，譬如0.5是指将图形缩小一半。

（3）旋转

cxt.rotate(angle);

rotate方法接受一个参数angle，angle是指旋转的角度，旋转的中心点是坐标轴的原点。旋转是以顺时针方向进行的，要想逆时针旋转时，将angle设定为负数就可以了。

案例2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            cxt.fillStyle="#eeeeff";
            cxt.fillRect(0,0,400,320);

            cxt.translate(60,60);
            for( var i=0;i<6;i++)
            {
                cxt.translate(50,50);
                cxt.scale(0.8,0.8);
                cxt.rotate(Math.PI/10);
                createStar(cxt);
                cxt.fill();
            }

            function createStar(cxt){
                var n=0;
                var dx=0;
                var dy=0;
                var s=50;
                cxt.beginPath();
                cxt.fillStyle='rgba(255,0,0,0.5)';
                var x=Math.sin(0);
                var y=Math.cos(0);
                var dig=Math.PI/5*4;
                for(var i=0;i<5;i++)
                {
                    var x=Math.sin(i*dig);
                    var y=Math.cos(i*dig);
                    cxt.lineTo(dx+x*s,dy+y*s);
                }
                cxt.closePath();
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>

效果图：

注释：
（1）如果要对矩形进行变形，使用坐标变换就足够了。
（2）createStar函数中，只创建了一个五角星，因坐标轴变换，在Canvas画布中，此五角星会一边缩小一边旋转，之后产生一个新的五角星，新的五角星又采用同样的方法进行绘制，最终绘制出一串变形效果的五角星。

HTML5画布（变形）的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  3. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  4. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  5. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  6. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  7. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  8. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  9. html5 画布上的rotate使用

    作为刚进公司的毕业生,第一个项目便是开发html5游戏,于是网上搜寻各种有关html5的资料,把w3School中有关html5的教程通通过了一遍,发现里面的教程非常适合刚接触html5的人,作为菜鸟 ...

随机推荐

  1. Linux_cloudera-scm-agent: unrecognized service

  2. sql对日期的处理，一个存储过程示例

    IF v_docType = 3 THEN update T_PATIENT_INFO set USER_NAME =userName ,SEX = v_sex,BIRTHDAY = to_date( ...

  3. 转：6款Java转C#的最佳工

    原文来自于:http://designzum.com/2014/03/27/best-tools-to-convert-java-to-c-source-code/ ava is the class ...

  4. 【转】Thunderbird on Ubuntu 12.04 – 调整邮件列表行间距

    原文网址:http://www.xuebuyuan.com/414703.html markz@markz-hp6200:~$ cd .thunderbird/ markz@markz-hp6200: ...

  5. GUID 的优缺点 uniqueidentifier

    1) 优点 同 IDENTITY 列相比,uniqueidentifier 列可以通过 NewID() 函数提前得知新增加的行 ID,为应用程序的后续处理提供了很大方便. 便于数据库移植,其它数据库中 ...

  6. LeeCode-String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  7. HDU-3787（字符串模拟）

    Problem Description 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号","隔开.现在请计算A+B的结果,并以正常形式输出.   Input 输入包含 ...

  8. iBatis查询结果部分为null的解决办法

    今天第一天接触iBatis,没有系统学习过,遇到了一个简单却闹心的错误:用iBatis查询数据库中某个表的多列结果作为一个对象返回时,会出现对象的部分属性为null值得错误.例如,查询用户表中的用户I ...

  9. iOS打电话、发邮件、发短信、打开浏览器

    //1.调用 自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://163@16 ...

  10. HybridApp开发准备工作——WebView

    如大家所见,手机真是越来越离不开我们的日常生活了,像我,现在出门必带的是手机.移动电源.公交卡:钱包什么的再也没出过门.两年前,我还在Android的应用开发中当了一次过客.嗯,当时JAVA学得太糟糕 ...