坐标变换

案例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. d029: 求出2－100之间的所有质数（素数）

    内容: 求出2-100之间的所有质数(素数) 输入说明: 无 输出说明: 一行一个素数 /* 质数又称素数.指在一个大于1的自然数中,除了1和此整数自身外,不能被其他自然数(不包括0)整除的数. */ ...

  2. START WITH CONNECT BY PRIOR 链表查询

    使用场景:排序 设计思路,id为主键,index为顺序,index存前一个节点的id,当然,按照这个思路可以实现双向链表的(preindex存前一个节点,nextindex存下一个节点) 这样的话排序 ...

  3. toast组件较为完美版本

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. ural 1180 Stone Game

    http://acm.timus.ru/problem.aspx?space=1&num=1180 #include <cstdio> #include <cstring&g ...

  5. Android中的手势

    Android对两种手势行为提供了支持:1.对于第一种手势行为而言,Android提供了手势检测,并为手势检测提供了相应的监听器.2.对于第二种手势行为,Android允许开发者添加手势,并提供了相应 ...

  6. <item.../>元素可指定如下常用属性

    android:id:为菜单项指定一个唯一表实.android:title:指定菜单项的标题.android:icon:指定菜单项的图标.android:alphabeticShortcut:为菜单项 ...

  7. 设计模式 ( 十八 )：State状态模式 -- 行为型

    1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ellse语句来做状态判断来进行不同情况的处理.但是对 ...

  8. HDFS Federation与HDFS High Availability详解

    HDFS Federation NameNode在内存中保存文件系统中每个文件和每个数据块的引用关系,这意味着对于一个拥有大量文件的超大集群来说,内存将成为限制系统横向扩展的瓶颈.在2.0发行版本系列 ...

  9. Java毫秒转换成日期格式

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti ...

  10. ios 限制输入长度

    ----------------UITextField限制输入的长度------------ - (BOOL)textField:(UITextField *)textField shouldChan ...