HTML5 Canvas画印章_html-js-css

概述HTML5 Canvas画印章

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!DOCTYPE HTML><HTML><head> <Meta charset="gbk"> <Title>HTML5 Canvas画印章</Title></head><body>    <canvas ID="canvas" wIDth="200" height="200"></canvas><script>   var canvas = document.getElementByID("canvas");     var context = canvas.getContext('2d');   var text = "XXX专用章";   var companyname = "浙江网络科技股份有限公司";    // 绘制印章边框      var wIDth = canvas.wIDth / 2;   var height = canvas.height / 2;   context.linewidth = 5;   context.strokeStyle = "#f00";   context.beginPath();   context.arc(wIDth,height,90,Math.PI * 2);//宽、高、半径   context.stroke();   //画五角星   create5star(context,wIDth,25,"#f00",0);    // 绘制印章名称       context.Font = '20px 宋体';    context.textBaseline = 'mIDdle';//设置文本的垂直对齐方式    context.textAlign = 'center'; //设置文本的水平对对齐方式    context.linewidth=1;    context.strokeStyle = '#f00';    context.strokeText(text,height+60);    // 绘制印章单位       context.translate(wIDth,height);// 平移到此位置,context.Font = '23px 宋体'    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];// 需要绘制的字符          if (i == 0) {           context.rotate(5 * Math.PI / 6);       } else{           context.rotate(angle);       }       context.save();       context.translate(70,0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离       context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴       context.strokeText(c,0);// 此点为字的中心点       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>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的HTML5 Canvas画印章全部内容，希望文章能够帮你解决HTML5 Canvas画印章所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1096797.html