html5 canvas绘制圆形印章，以及与页面交互 - 走向未知_H5之家

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4  <meta charset="UTF-8">
  5  <title>HTML5 Canvas画印章</title>
  6  <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script>
  7 </head>
  8 <body>
  9     <lable style="display: inline-block;margin:50px;font-size: 18px;">印章文字: 
 10     <input type="text" id="textname" style="height: 30px;width: 200px;" />
 11     </lable>
 12     <input type="button" id="changename" value="修改" />
 13     <div>  
 14     <canvas id="canvas" width="400" height="400" style="margin-left: 130px;border: 1px solid #666666;"></canvas>
 15     </div>
 16 <script>
 17   // canvas绘制图像的原点是canvas画布的左上角
 18    var canvas = document.getElementById("canvas");  
 19    var context = canvas.getContext('2d');
 20 
 21    $("body").on("click","#changename",function(){
 22            drawText($("#textname").val());
 23            EvenCompEllipse(context1, canvas1.width/2, canvas1.height/2, 100, 50);
 24    });
 25    // 绘制圆形印章
 26    function drawText(companyName="智慧应用软件工作室") {
 27           // 清除画布法一
 28           context.globalAlpha=1;
 29           context.fillStyle="#ffffff";
 30           context.fillRect(0,0,400,400);
 31 
 32 
 33        var text = "以升大学生创新实验中心";
 34        var companyName = companyName;
 35       
 36       // 绘制印章边框   
 37        var width = canvas.width / 2;
 38        var height = canvas.height / 2;
 39        context.lineWidth = 5;
 40        context.strokeStyle = "#f00";
 41        context.beginPath();
 42        context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
 43        context.stroke();
 44 
 45        //画五角星
 46        create5star(context,width,height,25,"#f00",0);
 47 
 48         // 绘制印章名称   
 49         context.font = '8px 宋体';
 50         context.textBaseline = 'middle';//设置文本的垂直对齐方式
 51         context.textAlign = 'center'; //设置文本的水平对对齐方式
 52         context.lineWidth=1;
 53         context.fillStyle = '#f00';
 54         context.save();
 55         context.translate(width,height+60);// 平移到此位置,
 56         context.scale(1,2);//伸缩要先把远点平移到要写字的位置，然后在绘制文字
 57         context.fillText(text,0,0);//原点已经移动
 58         context.restore();
 59 
 60         // 绘制印章单位   
 61         context.translate(width,height);// 平移到此位置,
 62         context.font = '18px 宋体'
 63         var  count = companyName.length;// 字数
 64         var  angle = 4*Math.PI/(3*(count - 1));// 字间角度   
 65         var chars = companyName.split("");
 66         var c;
 67        for (var i = 0; i < count; i++) {
 68            c = chars[i];// 需要绘制的字符 
　　　　　　　　　//绕canvas的画布圆心旋转  
 69            if (i == 0) {
 70                context.rotate(5 * Math.PI / 6);
 71            } else{
 72                context.rotate(angle);
 73            }
 74            context.save();
 75            context.translate(66, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
 76            context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
 77            context.scale(1,2);//伸缩画布，实现文字的拉长
 78            context.fillText(c, 0, 0);// 此点为字的中心点
 79            context.restore();           
 80        }
 81        // 设置画布为最初的位置为原点，旋转回平衡的原位置，用于清除画布
 82        context.rotate(-Math.PI/6);
 83        context.translate(0-canvas.width/2,0-canvas.height/2);
 84 
 85 
 86 
 87        //绘制五角星  
 88         /** 
 89          * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
 90          * rotate:绕对称轴旋转rotate弧度 
 91          */
 92         function create5star(context, sx, sy, radius, color, rotato) {
 93             context.save();
 94             context.fillStyle = color;
 95             context.translate(sx, sy);//移动坐标原点
 96             context.rotate(Math.PI + rotato);//旋转
 97             context.beginPath();//创建路径
 98             var x = Math.sin(0);
 99             var y = Math.cos(0);
100             var dig = Math.PI / 5 * 4;
101             for (var i = 0; i < 5; i++) {//画五角星的五条边
102                 var x = Math.sin(i * dig);
103                 var y = Math.cos(i * dig);
104                 context.lineTo(x * radius, y * radius);
105             }
106             context.closePath();
107             context.stroke();
108             context.fill();
109             context.restore();
110         }
111     }
112 
113 </script>
114 </body>
115 </html>
canvas刚刚开始学习，还不是很理解，从网上搜了很多的例子，也结合了自己的理解，如果有不足还请哪位大神指正。
因为对旋转和平移理解还不够，画布的清除在旋转上也不是很好，希望哪位走过路过的大神能够给予指点，小弟万分感谢。