JavaScript和html5 canvas生成圆形印章

12人阅读 评论(0) 收藏 举报

代码:

复制代码
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();  
    }
}
复制代码

挂载元素:

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

调用:

createSeal('canvas','江西省晨尚科技有限公司','测试专用章');

效果:

获取图片Base64:

document.getElementById('canvas').toDataURL("image/png");

 如果需要用php保存到服务器上的话,可以参考下面的代码:

$str = $_POST['base64'];
preg_match('/^(data:\s*image\/(\w+);base64,)/', $str, $result);
$str = str_replace($result[1], '', $str);
file_put_contents('a.png',base64_decode($str));

 

查看评论

HTML5 canvas 绘制圆形

canvas绘制圆形的思路: 1、创建路径 XXX.beginpath(); 2、创建圆形的路径; 3、关闭路径;XXX.closepath(); 路径不关闭也能绘制出图形 4、设定绘制样式。...
  • u011102207
  • u011102207
  • 2015-08-07 16:17:41
  • 611

html5 canvas元素各种圆形绘制

canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持ht...
  • JRJ1637
  • JRJ1637
  • 2016-12-16 00:59:30
  • 611

html5 canvas制作圆形水波进度条动画特效

  • 2017年07月29日 09:20
  • 1KB
  • 下载

HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。 代码如下: ...
  • qq_25821067
  • qq_25821067
  • 2016-06-10 21:11:53
  • 2503

html5实现对试题图片批改效果,类似盖章效果

因项目功能需要,最近几天开始研究html5,实现对上传的试题图片进行批改对错,批改完保存批改后的图片功能。主要涉及到html5 canvas画布和js的相关知识点。 参考:http://www....
  • u013408979
  • u013408979
  • 2016-09-03 15:30:35
  • 2657

canvas制作圆形百分比统计图

canvas制作原生的百分比圆形比例等 *{margin:0;padding:0;} body{text-align:center;}
  • u012409048
  • u012409048
  • 2017-08-02 23:33:03
  • 852

HTML5之Canvas画圆形

HTML5之Canvas画圆形 1、设计源码 HTML5之Canvas画圆形 var canvas=document.getElementById("canvas"...
  • you23hai45
  • you23hai45
  • 2015-03-14 20:51:44
  • 2199

JavaScript canvas 绘制圆形时钟

canvas 绘制时钟
  • u012104947
  • u012104947
  • 2016-04-19 15:20:06
  • 559

html5 canvas 自定义画图裁剪图片

html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转。可以实现: 1、照片本地处理,ps有的一些基本功能都有 2、结合js可以实现一些很炫...
  • taoerchun
  • taoerchun
  • 2015-09-16 17:25:05
  • 3645
    个人资料
    等级:
    访问量: 1223万+
    积分: 6万+
    排名: 37
    文章分类
    文章存档
    最新评论
    计算流量