分享HTML5 Canvas画印章效果实例代码

百变鹏仔 3个月前 (10-18) #H5教程

文章标签印章

下面分享一个用html5 canvas画印章效果实例代码，可以看一下

<!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(&#39;2d&#39;);   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, 0, Math.PI * 2);//宽、高、半径   context.stroke();   //画五角星   create5star(context,width,height,25,"#f00",0);    // 绘制印章名称       context.font = &#39;20px 宋体&#39;;    context.textBaseline = &#39;middle&#39;;//设置文本的垂直对齐方式    context.textAlign = &#39;center&#39;; //设置文本的水平对对齐方式    context.lineWidth=1;    context.strokeStyle = &#39;#f00&#39;;    context.strokeText(text,width,height+60);    // 绘制印章单位       context.translate(width,height);// 平移到此位置,    context.font = &#39;23px 宋体&#39;    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, 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>

<!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(&#39;2d&#39;);   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, 0, Math.PI * 2);//宽、高、半径   context.stroke();   //画五角星   create5star(context,width,height,25,"#f00",0);    // 绘制印章名称       context.font = &#39;20px 宋体&#39;;    context.textBaseline = &#39;middle&#39;;//设置文本的垂直对齐方式    context.textAlign = &#39;center&#39;; //设置文本的水平对对齐方式    context.lineWidth=1;    context.strokeStyle = &#39;#f00&#39;;    context.strokeText(text,width,height+60);    // 绘制印章单位       context.translate(width,height);// 平移到此位置,    context.font = &#39;23px 宋体&#39;    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, 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>

文章推荐

分享HTML5 Canvas画印章效果实例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集