坐标变换

案例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. 一条sql,有分页，表合并查询，多表连接，用于oracle数据库

    SELECT * FROM ( SELECT TT.*,ROWNUM RN FROM ( SELECT A.CASE_ID AS TREATID, A.TYPE AS TYPE, B.CONTENT ...

  2. YII 事件event和行为Behavior

    To declare an event in your CComponent child class, you should add a method with aname starting with ...

  3. Linux内核源代码解析——TCP状态转移图以及其实现

    本文原创为freas_1990,转载请标明出处http://blog.csdn.net/freas_1990/article/details/10223581 TCP状态转移的原理并不高深,但是处理逻 ...

  4. sicily 4378 connected components in undirected graph

    题意:求图中的连通块数,注意孤立的算自连通! 例如:6个顶点3条路径,其中路径为:1->2    4->5  1->3 那么有(1-2&&1->3) + (4- ...

  5. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. MVC 模板页和布局

    我们在以前的Asp.NET课程中已经学习过母版页了,在MVC中WebForm视图使用母版页的方法与以前基本相同. 创建一个项目MvcMasterPageDemo. 添加Home控制器,生成Index视 ...

  7. Python模拟登录实战(二)

    目标:1.模拟登录豆瓣,2.自动更改签名和发表说说. 代码如下: #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'ziv·chan ...

  8. 预处理、const与sizeof相关面试题

    1.用预处理指令#define 声明一个常数,用以表明一年中有多少秒(忽略闰年问题) #define语法知识: (1) 不能以分号结束,括号的使用防止宏定义展开后的二义性. (2) 预处理器将为你计算 ...

  9. Android adb

    查看原文:http://blog.csdn.net/u010818425/article/details/52266593 (一)基础操作 安装app adb install -r xxx.apk / ...

  10. 关闭钩子(shutdown hook)的作用

    DK1.3介绍了java.lang.Runtime class的addShutdownHook()方法.如果你需要在你的程序关闭前采取什么措施,那么关闭钩子(shutdown hook)是很有用的. ...