源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5下载 > 资讯报道 > 网页制作 > HTML5 Canvas画印章效果代码

HTML5 Canvas画印章效果代码

作者:yezheng来源:a5源码浏览:时间:2015-10-27 15:50我要评论
这篇文章主要为大家介绍了HTML5 Canvas画印章效果代码,非常简单实用,需要的朋友可以参考下

这篇文章主要为大家介绍了HTML5 Canvas画印章效果代码,非常简单实用,需要的朋友可以参考下 

具体代码如下:

1.

<!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, 0, Math.PI * 2);//宽、高、半径

context.stroke();

//画五角星

create5star(context,width,height,25,"#f00",0);

// 绘制印章名称

context.font = '20px 宋体';

context.textBaseline = 'middle';//设置文本的垂直对齐方式

context.textAlign = 'center'; //设置文本的水平对对齐方式

context.lineWidth=1;

context.strokeStyle = '#f00';

context.strokeText(text,width,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, 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>

2.

<!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, 0, Math.PI * 2);//宽、高、半径

context.stroke();

//画五角星

create5star(context,width,height,25,"#f00",0);

// 绘制印章名称

context.font = '20px 宋体';

context.textBaseline = 'middle';//设置文本的垂直对齐方式

context.textAlign = 'center'; //设置文本的水平对对齐方式

context.lineWidth=1;

context.strokeStyle = '#f00';

context.strokeText(text,width,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, 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画印章效果代码”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话