例子5：图形基本变换（平移，缩放，旋转）
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  
8.  //这个函数用于演示一些常用的坐标变换
9.  //常见的坐标变换有平移，缩放，旋转
10.  function drawTransformShape(id){
11.     
12.     var canvas = document.getElementById(id);
13.     if(canvas == null) 
14.         return false;
15.     //画底图
16.     var context = canvas.getContext('2d');
17.     context.fillStyle="#FF00FF";
18.     context.fillRect(0,0,400,300);
19.     
20.     //移动坐标轴的原点，因为这里向右边平移了200，向下移动了50，所以水平方向是居中了
21.     context.translate(200,50);
22.     
23.     //循环可以画一系列的五角星
24.     for(var i=0;i<50;i++){
25.         //每次坐标轴的原点往右下各移动25像素
26.         context.translate(25,25);
27.         //并且每次进行缩放到0.95倍
28.         context.scale(0.95,0.95);
29.         //然后把这个图形进行旋转，每次转动+18度（也就是顺时针）
30.         context.rotate(Math.PI/10);
31.         //然后在当前位置画一个五角星
32.         create5star(context);
33.         //并且填充当前五角星
34.         context.fill();
35.     }
36.     
37.  }
38.  
39.  
40.  //这个函数用于绘制一个五角星
41.  function create5star(context){
42.     var n = 0;
43.     var dx = 100;
44.     var dy = 0 ;
45.     var s = 50;
46.     //创建路径
47.     context.beginPath();
48.     context.fillStyle="rgba(255,0,0,0.5)";
49.     var x = Math.sin(0);
50.     var y= Math.cos(0);
51.     var dig = Math.PI/5 *4;
52.     //画五角星的五条边
53.     for(var i = 0;i<5;i++){
54.         var x = Math.sin(i*dig);
55.         var y = Math.cos(i*dig);
56.         context.lineTo(dx+x*s,dy+y*s);
57.     }
58.     context.closePath();
59.  }
60.  
61.  
画出来的结果是：

标签：PHP ,CSS数据库 ,优化