html实现公司章印

人狠话不多 复制粘贴一把嗦

<canvas id="canvas" width="250" height="250"></canvas>

<script type="text/javascript">
    createSeal('canvas','fuck2333','专用章');


function createSeal(id,company,name){
    
    var canvas = document.getElementById(id);  
    var context = canvas.getContext('2d');
    
    // 绘制印章边框   
    var width=canvas.width/2;
    var height=canvas.height/2;
    context.lineWidth=7;
    context.strokeStyle="#f00";
    context.beginPath();
    context.arc(width,height,110,0,Math.PI*2);
    context.stroke();

    //画五角星
    create5star(context,width,height,30,"#f00",0);

    // 绘制印章名称   
    context.font = '22px Helvetica';
    context.textBaseline = 'middle';//设置文本的垂直对齐方式
    context.textAlign = 'center'; //设置文本的水平对对齐方式
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(name,width,height+65);

    // 绘制印章单位   
    context.translate(width,height);// 平移到此位置,
    context.font = '30px Helvetica'
    var count = company.length;// 字数   
    var angle = 4*Math.PI/(3*(count - 1));// 字间角度   
    var chars = company.split("");   
    var c;
    for (var i = 0; i < count; i++){
        c = chars[i];// 需要绘制的字符   
        if(i==0)
            context.rotate(5*Math.PI/6);
        else
          context.rotate(angle);
        context.save(); 
        context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   
        context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   
        context.fillText(c,0, 5);// 此点为字的中心点   
        context.restore();             
    }

    //绘制五角星  
    /** 
     * 创建一个五角星形状. 该五角星的中心坐标为(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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ✨✨✨喜报:6月14日,波峰中学王琳辉同学代表涞水县参加保定市中小学生“百年追梦 全面小康”讲故事、演讲比赛中,用...
    YLX123阅读 333评论 0 0
  • 我想起了别人对我的好,我也想起了我对别人的好。 我在情绪最激动的时候,也没说出最伤人的话,却遭遇了别人的人身攻击。...
    美萱读书阅读 282评论 0 2
  • “当我心中有怨,无法去爱的时候, 我祈求上天赐给我爱与宽恕的能力。 当我攻击,我可以看出,我攻击的对象只是一个象征...
    Dires蕾蕾阅读 354评论 0 0
  • 曾梦想挣脱,却深陷泥潭,而其中的滋味着实难受。 曾几何时威风凛凛,而现在落魄惨乱。 独自舔着伤口,重新强推自己的信...
    破特阅读 536评论 0 2
  • 感赏自己今天终于可以休假! 感赏女儿中午吃饭后好好的补了一觉! 感赏婆婆到医院帮我,公公在家买菜做饭等我们回家吃饭...
    相信一切都会好起来的阅读 184评论 0 1