坐标变换

案例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. QuerryRunner Tools

    package com.ydbg.gis.utils; import java.sql.SQLException; import java.util.List; import java.util.Ma ...

  2. 如何让多个Activity共用一个Menu

    我们可以定义一个自己的CommActivity继承自Activity,然后让每个自定义Activity继承CommActivity,就可以做到. 例如: public class CommActivi ...

  3. Javascript OrderBy

    要在js 实现orderBy基本知识就是 array.sortarray.sort(function(a,b){ a 表示 row 0 b 表示 row 1 它会loop多次你可以比较 if(a &g ...

  4. PYTHON文件多线程下载

    其实,在一般的文件编程中,这有两个概念要说明: 第一是,下载一个大文件,将这个大文件多为多线程. 第二是,下载N多小文件,将每个线程指定下载多个小文件. 现在实现的是多线程下载一个大文件. 今天完成了 ...

  5. OpenRTSP的使用

    由于需要研究OpenRTSP的源码,所以先学习下使用. -d [time]--------这个是录制时间,就是单位秒,超时后,程序自动结束. -i   -----------以.avi文件格式生成. ...

  6. java与数据结构(6)---java实现链栈

    栈之链式存储结构链栈 链栈 栈的链式存储结构成为链栈.链栈是没有头结点,头结点就是栈顶指针top. 代码结构 package list; public interface Stackable;公共接口 ...

  7. 为什么 HTTP 有时候比 HTTPS 好？

    做为一家安全公司,我们在站点Stormpath上经常被开发者问到的是有关安全方面最优做法的问题.其中一个被经常问到的问题是: 我是否应当在站点上运行HTTPS? 很不幸,查遍整个因特网,你大多数情况下 ...

  8. Java_XML操作

    xml的写: code: import java.io.File; import java.io.StringWriter; import javax.xml.parsers.DocumentBuil ...

  9. Unity Inspector 给组件自动关联引用

    项目进入上线阶段了, 有一些地方需要总结和优化.  我发现UI一改变,我就要拖很久的UI. UI结构发生改变我还必须给一些变量设置好引用,后来我去看别人预设的时候组件拖放的变量至少10个以上, 它们一 ...

  10. swift 中String常用操作

    1.  字符串定义 var s = "aaaaaa" // 两个字符串均为空并等价. var emptyString = ""   var anotherEmp ...