<!DOCTYPE html>

 <html>

 <head>

  <meta charset="UTF-8">

  <title>HTML5 Canvas画印章</title>

  <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script>

 </head>

 <body>

     <lable style="display: inline-block;margin:50px;font-size: 18px;">印章文字:

     <input type="text" id="textname" style="height: 30px;width: 200px;" />

     </lable>

     <input type="button" id="changename" value="修改" />

     <div>

     <canvas id="canvas" width="400" height="400" style="margin-left: 130px;border: 1px solid #666666;"></canvas>

     </div>

 <script>

   // canvas绘制图像的原点是canvas画布的左上角

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext('2d');

    $("body").on("click","#changename",function(){

            drawText($("#textname").val());

            EvenCompEllipse(context1, canvas1.width/2, canvas1.height/2, 100, 50);

    });

    // 绘制圆形印章

    function drawText(companyName="智慧应用软件工作室") {

           // 清除画布法一

           context.globalAlpha=1;

           context.fillStyle="#ffffff";

           context.fillRect(0,0,400,400);

        var text = "以升大学生创新实验中心";

        var companyName = companyName;

       // 绘制印章边框

        var width = canvas.width / 2;

        var height = canvas.height / 2;

        context.lineWidth = 5;

        context.strokeStyle = "#f00";

        context.beginPath();

        context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径

        context.stroke();

        //画五角星

        create5star(context,width,height,25,"#f00",0);

         // 绘制印章名称

         context.font = '8px 宋体';

         context.textBaseline = 'middle';//设置文本的垂直对齐方式

         context.textAlign = 'center'; //设置文本的水平对对齐方式

         context.lineWidth=1;

         context.fillStyle = '#f00';

         context.save();

         context.translate(width,height+60);// 平移到此位置,

         context.scale(1,2);//伸缩要先把远点平移到要写字的位置，然后在绘制文字

         context.fillText(text,0,0);//原点已经移动

         context.restore();

         // 绘制印章单位

         context.translate(width,height);// 平移到此位置,

         context.font = '18px 宋体'

         var  count = companyName.length;// 字数

         var  angle = 4*Math.PI/(3*(count - 1));// 字间角度

         var chars = companyName.split("");

         var c;

        for (var i = 0; i < count; i++) {

            c = chars[i];// 需要绘制的字符 
　　　　　　　　　//绕canvas的画布圆心旋转

            if (i == 0) {

                context.rotate(5 * Math.PI / 6);

            } else{

                context.rotate(angle);

            }

            context.save();

            context.translate(66, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离

            context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴

            context.scale(1,2);//伸缩画布，实现文字的拉长

            context.fillText(c, 0, 0);// 此点为字的中心点

            context.restore();

        }

        // 设置画布为最初的位置为原点，旋转回平衡的原位置，用于清除画布

        context.rotate(-Math.PI/6);

        context.translate(0-canvas.width/2,0-canvas.height/2);

        //绘制五角星

         /**

          * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上

          * rotate:绕对称轴旋转rotate弧度

          */

         function create5star(context, sx, sy, radius, color, rotato) {

             context.save();

             context.fillStyle = color;

             context.translate(sx, sy);//移动坐标原点

             context.rotate(Math.PI + rotato);//旋转

             context.beginPath();//创建路径

             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);

                 context.lineTo(x * radius, y * radius);

             }

             context.closePath();

             context.stroke();

             context.fill();

             context.restore();

         }

     }

 </script>

 </body>

 </html>

canvas刚刚开始学习，还不是很理解，从网上搜了很多的例子，也结合了自己的理解，如果有不足还请哪位大神指正。

因为对旋转和平移理解还不够，画布的清除在旋转上也不是很好，希望哪位走过路过的大神能够给予指点，小弟万分感谢。

html5 canvas绘制圆形印章，以及与页面交互的更多相关文章

  1. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  2. JavaScript和html5 canvas生成圆形印章

    代码: function createSeal(id,company,name){ var canvas = document.getElementById(id); var context = ca ...

  3. [转]JavaScript和html5 canvas生成圆形印章

    本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){ var ...

  4. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  7. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

随机推荐

  1. bootstrap多层模态窗

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. layer (jQuery弹出层插件)使用

    $(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...

  3. Hyper-V性能-CPU分配

    为新部署的微软Hyper-V环境中的主机和网络挑选合适的硬件并非易事,更不用说在生产环境中衡量和监控性能这项任务了.在这里,我和大家谈谈服务器的核心CPU与Hyper-V的结合是如何相得益彰的. 我接 ...

  4. iOS 数组越界 Crash加工经验

    我们先来看看有可能会出现的数组越界Crash的地方. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd ...

  5. 【十分钟教会你汇编】MIPS编程入门（妈妈说标题要高大上，才会有人看>_<！）

    无意中找到一篇十分好用,而且篇幅也不是很大的入门教程,通篇阅后,再把“栗子”敲一遍,基本可以有一个比较理性的认识,从而方便更好地进一步深入学习. 废话不多说,上干货(英语好的直接跳过本人的渣翻译了哈— ...

  6. 【iOS程序启动与运转】- RunLoop个人小结

    学习iOS开发一般都是从UI开始的,从只知道从IB拖控件,到知道怎么在方法里写代码,然后会显示什么样的视图,产生什么样的事件,等等.其实程序从启动开始,一直都是按照苹果封装好的代码运行着,暴露的一些属 ...

  7. Java基础知识强化之IO流笔记61：输入流 和 输出流 使用总结

    1. 结构: 字节流:InputStream,OutputStream 字符流:Reader,Writer 2. 字符流 和 字节流: (1)Reader:读取字符流的抽象类 BufferedRead ...

  8. Android（java）学习笔记144：Android音视频录制类MediaRecorder用法举例

    Android语音录制可以通过MediaRecorder和AudioRecorder.MediaRecorder本来是多媒体录制控件,可以同时录制视频和语音,当不指定视频源时就只录制语音(默认录制语言 ...

  9. html5标签兼容ie6，7，8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  10. [置顶] linux第二天，g++，gcc，ps,cat,sort,grep,kill,less,ls -l ,

    33.less sample.txt 分页输出文件内容到屏幕 34./search content (搜索内容) 可以将文档中有searchcontent 的行输出到屏幕 35.grep scienc ...