JavaScript和html5 canvas生成圆形印章
代码:
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));
核心的代码网上找的,自己整理加工了一下而已。
JavaScript和html5 canvas生成圆形印章的更多相关文章
- [转]JavaScript和html5 canvas生成圆形印章
本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){ var ...
- html5 canvas绘制圆形印章,以及与页面交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 基于HTML5 Canvas生成粒子效果的人物头像
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...
- JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
基于HTML5 canvas 获取文本占用的像素宽度 by:授客 QQ:1033553122 直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- flask中'bool' object has no attribute '__call__'问题
#写flask时报错 <ul class="nav navbar-nav"> <li><a href="/">Home< ...
- HashMap与TreeMap的区别
首先描述下什么是Map. 在数组中我们是通过数组的下标来对其内容进行索引的,而在Map中我们是通过对象对对象进行索引的,用来索引的对象叫做key,其对应的对象叫做value.这就是我们平常说的键值对. ...
- .NET三层架构例子超链接可以点击显示内容页面
在研究了一个星期的三层架构写出的一个小功能,使用三层架构并实现点击新闻标题可以跳转到自己写的新闻页面. 首先是一个DBHelper,这个不是我自己写的,是朋友给我的 using System; usi ...
- esxi安装全过程及基本配置
esxi6.0下载地址 链接: http://pan.baidu.com/s/1jIfg2yU 密码: qacv 支持检测可以参考:http://www.linuxidc.com/Linux/2012 ...
- scau 8633 回文划分
8633 回文划分 时间限制:1000MS 内存限制:1000K 题型: 编程题 语言: 无限制 Description 我们说一个字符串是回文串,那么意味着这个串从两边读起来的字母都是一样的. ...
- 《精解Windows 10》
<精解Windows 10>全面深入讲解Windows 10操作系统的使用方法.本书共计14章内容.第一章简述Windows 10操作系统的一些变革:第二章介绍Modern 2.0界面的体 ...
- 原始的2文件的makefile错误
从来没系统的看过makefile文档,平时属于复制模板,用完即忘,下午尝试按自己的理解写一个最简单的makefile,含2个.c文件,1个.h文件,费了个把小时,参考别人的文章才弄出来,特记录. ma ...
- excel vba 当cell的值变化时 进行判断操作
示例效果: ----------- 在excel的sheet1中, 当A列的值 大于100时 ,其对应B列背景显示红色,C列显示"有数据" 否则,B列背景色正常,C列清空相应的数据 ...
- Ubuntu 14.04 部署 CEPH集群
注:下文的所有操作都在admin节点进行 1.准备三台虚拟机,其中一台作为admin节点,另外两台作为osd节点,并相应地用hostname命令将主机名修改为admin,osd0,osd1,最后修改/ ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...