点击这里看效果：
http://www.108js.com/article/article7/src/seal/seal.html
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>HTML5 Canvas画印章</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var text="取钱专用章";
var text1="中国码农银行";
// 绘制印章边框
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,20,"#f00",0);
// 绘制印章名称
context.font = '18px Helvetica';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.strokeStyle = '#f00';
context.strokeText(text,width,height+50);
// 绘制印章单位
context.translate(width,height);// 平移到此位置,
context.font = '22px Helvetica'
var count = text1.length;// 字数
var angle = 4*Math.PI/(3*(count - 1));// 字间角度
var chars = text1.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.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><body></html>
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
- 大小: 3.8 KB
分享到：
相关推荐
在Web开发中，Canvas是HTML5提供的一种强大的图形绘制接口，允许开发者在网页上动态绘制图像、文字甚至视频。本文将深入探讨如何利用Canvas进行图片和文字的拼接合成，生成自定义的图像，尤其适用于制作邀请函、海报...
综上所述，这个"HTML5模拟电子合同书翻页及盖章特效.zip"文件中的应用充分利用了HTML5的多项高级特性，包括Canvas绘图、SVG图形、Web Workers后台处理、离线存储以及拖放功能，构建了一个功能完善的交互式电子合同书...
HTML5是第五代HTML的标准，它新增了<canvas>元素，允许使用JavaScript在网页上绘制图形。而JavaScript是一种脚本语言，常用于网页的动态效果。当JavaScript和HTML5的<canvas>元素结合时，就可以在网页中实现丰富的...
1. **Canvas元素**：HTML5的Canvas是用于绘制2D图形的画布，它可以动态地生成图像。在这个应用中，Canvas可能被用来绘制翻页动画，模拟纸张的弯曲和翻动效果。开发者可能使用JavaScript库如Fabric.js或Paper.js来...
Vue 移动端实现canvas签名的核心在于利用HTML5的canvas元素和触摸事件，为用户提供一个可在屏幕上绘制图形的画板。以下将详细讲解这个过程。 首先，我们需要在HTML中创建一个canvas元素，并设置其在页面中的布局。...
HTML5电子签名板是一种利用现代浏览器技术实现的交互式签名工具，主要依赖于HTML5的Canvas元素。Canvas是HTML5中的一个强大特性，允许开发者在网页上动态绘制图形，包括文字、线条、形状等，为创建丰富的用户界面...
HTML5是超文本标记语言的最新版本，其引入了许多新特性，如离线存储、拖放功能、媒体元素、 canvas（画布）等。在这个场景中，Canvas是一个特别关键的元素，它允许开发者在网页上动态绘制图形，包括合成图片。通过...
这可能涉及到SVG（Scalable Vector Graphics）或者canvas元素的使用。SVG是一种基于XML的矢量图像格式，可以保证印章在不同分辨率下都能清晰显示。使用jQuery与SVG结合，可以方便地控制印章的旋转、缩放等效果，模拟...
总结来说，"jQuery仿盖章效果并合成图片"项目结合了jQuery的事件处理、CSS3的动画特性以及HTML5的canvas技术，提供了一种在网页上模拟盖章并与图片合成的方法。这对于提升网页的用户体验和互动性具有很大的帮助。在...
Canvas提供了绘制图形的能力，使得我们可以将印章图片加载到Canvas上下文中，并根据用户的操作进行实时更新。 总结来说，jQuery.zsign插件是实现电子签章的一个实用工具，它利用jQuery的便利性和Canvas的灵活性，为...
4. **动态生成签章**：如果需要动态生成签章，可以使用canvas元素，通过绘图API来绘制印章图案。但这超出了jQuery的范畴，可能需要结合其他库如Fabric.js。 **结合jspdf生成PDF** 1. **jspdf库**：jspdf是一个...
JavaScript可以通过Canvas API来绘制图形和文本，实现自定义的印章样式。Canvas提供了丰富的绘图方法，如`fillText`用于绘制文本，`arc`用于绘制圆形，`stroke`用于描边等。印章的文字内容和布局可以通过JavaScript...
我们的任务是使用我们的 javascript 印章在 HTML5 画布标签中创建几个图形。 这是一项具有挑战性的任务，因为它需要将每个数据值转换为饼图的一部分，然后再次处理数据以考虑高密度显示。 ＃＃＃这个怎么运作： 一...
HTML5引入了许多新特性，如 semantic tags（语义化标签）、canvas（画布）和video（视频）元素，这些可能都在"UI-Restaurant-Passport"中有所应用。 2. **CSS**（Cascading Style Sheets）：CSS用于控制网页的样式...
这个工具基于jquery-1.7.1.min.js，这是一个小巧而强大的JavaScript库，是jQuery系列的早期版本，包含了丰富的DOM操作、事件处理和动画效果等功能，使得开发者能够更方便地操作HTML元素，简化前端开发工作。...