html5画布实现公司印章效果

<html><head><meta charset="UTF-8"><title>HTML5 Canvas画印章</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body><lable style="display: inline-block;margin:50px;font-size: 18px;">印章文字:<input type="text" id="textname" style="height: 30px;width: 200px;" value="苏州领拓天成信息技术有限公司" /></lable><lable style="display: inline-block;margin:50px;font-size: 18px;">X:<input type="text" id="left" style="height: 30px;width: 200px;" value="500" /></lable><lable style="display: inline-block;margin:50px;font-size: 18px;">Y:<input type="text" id="top" style="height: 30px;width: 200px;" value="100" /></lable><input type="button" id="changename" value="修改" /><div><div>4月30日，“农民将军”甘祖昌的夫人、96岁的全国道德模范龚全珍，坐在江西萍乡家里向记者朗声复述这封她寄往北京的书信。 　　这是春天最好的月份，这片她奉献了一生的土地，这些传颂着她名字的街巷，那些她钟爱一生的书卷，一切都重新在眼前清晰起来。 　　17天前，她刚刚经历了一场称得上世界级难度的眼科手术。 　　16天前，她揭下了纱布，重获光明。</div><div>1957年，作为西北大学教育系毕业的知识女性，她跟随丈夫甘祖昌将军回到江西老家建设农村，从此将一生奉献给了山乡教育。赤脚下田、荷锄上山，修路建桥、扶贫助学，与村民悲欢与共、对孩子竭尽所能。“做得太有限”“不要麻烦组织”，正是她常挂在嘴边的话。</div><canvas id="canvas" width="200" height="200" style="position: absolute;"></canvas></div><script>// canvas绘制图像的原点是canvas画布的左上角var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');var textstring = '领云监制';$(function() {draw(textstring);});$('#changename').click(function() {draw(textstring);});function draw(textstring) {var left = $('#left').val();var top = $('#top').val();$('#canvas').css('top', top + 'px').css('left', left + 'px').css('position', 'absolute');drawText($("#textname").val(), textstring);}// 绘制圆形印章function drawText(companyName, textstring) {// 清除画布法一context.globalAlpha = 1;context.fillStyle = 'rgba(255, 255, 255, 0)';context.fillRect(0, 0, $('#canvas').width(), $('#canvas').height());var text = textstring;// 绘制印章边框   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 = 'normal bold 12px 宋体';context.textBaseline = 'middle'; //设置文本的垂直对齐方式context.textAlign = 'center'; //设置文本的水平对对齐方式context.lineWidth = 1;context.fillStyle = '#f00';context.save();context.translate(width, height + 60); // 平移到此位置,context.scale(1, 2); //伸缩要先把远点平移到要写字的位置，然后在绘制文字context.fillText(text, 0, 0); //原点已经移动context.restore();// 绘制印章单位   context.translate(width, height); // 平移到此位置,context.font = 'normal bold 20px 宋体';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]; // 需要绘制的字符 //绕canvas的画布圆心旋转  if(i == 0) {context.rotate(5 * Math.PI / 6);} else {context.rotate(angle);}context.save();context.translate(66, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴context.scale(1, 2); //伸缩画布，实现文字的拉长context.fillText(c, 0, 0); // 此点为字的中心点context.restore();}// 设置画布为最初的位置为原点，旋转回平衡的原位置，用于清除画布context.rotate(-Math.PI / 6);context.translate(0 - canvas.width / 2, 0 - canvas.height / 2);//绘制五角星  /** * 创建一个五角星形状. 该五角星的中心坐标为(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画布实现公司印章效果相关推荐

用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
html5 2020视觉效果,体验未来：10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
php绘制时钟刻度,html5 画布时钟效果
网上看到个时钟效果,感觉挺好看,转了来,具体通过html5画布技术实现的,效果图如下: 具体 html 代码: html5 时钟效果 /** * Created by Administrator on ...
HTML5实现刮奖效果
原文:HTML5实现刮奖效果要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
html页面矩形,HTML5画布（矩形）
canvas元素用于绘制图形. canvas元素是HTML5中新增的一个重要元素,元素本身是没有绘图能力,所有的绘制工作必须在javascript内部完成. 案例1: function draw(){ ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...

html5画布实现公司印章效果

html5画布实现公司印章效果相关推荐

最新文章

热门文章