html5 canvas绘制圆形印章,以及与页面交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas画印章</title>
<script type="text/javascript" src="../JQmain/jquery-2.2.0.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;" />
</lable>
<input type="button" id="changename" value="修改" />
<div>
<canvas id="canvas" width="400" height="400" style="margin-left: 130px;border: 1px solid #666666;"></canvas>
</div>
<script>
// canvas绘制图像的原点是canvas画布的左上角
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d'); $("body").on("click","#changename",function(){
drawText($("#textname").val());
EvenCompEllipse(context1, canvas1.width/2, canvas1.height/2, 100, 50);
});
// 绘制圆形印章
function drawText(companyName="智慧应用软件工作室") {
// 清除画布法一
context.globalAlpha=1;
context.fillStyle="#ffffff";
context.fillRect(0,0,400,400); var text = "以升大学生创新实验中心";
var companyName = 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 = '8px 宋体';
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 = '18px 宋体'
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>
canvas刚刚开始学习,还不是很理解,从网上搜了很多的例子,也结合了自己的理解,如果有不足还请哪位大神指正。
因为对旋转和平移理解还不够,画布的清除在旋转上也不是很好,希望哪位走过路过的大神能够给予指点,小弟万分感谢。
html5 canvas绘制圆形印章,以及与页面交互的更多相关文章
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- JavaScript和html5 canvas生成圆形印章
代码: function createSeal(id,company,name){ var canvas = document.getElementById(id); var context = ca ...
- [转]JavaScript和html5 canvas生成圆形印章
本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){ var ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
随机推荐
- openssl pem转cer
openssl x509 -in cert/2120.pem -outform der -out cert/ios20170109.cer
- JavaScript- 获得TreeView CheckBox里选中项的值
获得TreeView CheckBox里选中项的值,对JSDOM控制还不是很熟,感觉不太容易.试了很多次终于成功了. 代码如下 <body> <form id="form1 ...
- Rediss_基本介绍
Redis是典型的NoSQL数据库( Not Only SQL) NoSQL数据库: NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起, 传统的关系数据库在应付web2.0网站, 特 ...
- Yii2版本号新特性简单介绍
Yii2 Beta版本号在今年4月份公布.眼下正在改动问题和完好文档中. Yii2要求PHP版本号不低于5.4,主要有例如以下改进: 1)支持PHP框架间协作组制定的PSR-4标准,这简化了文件夹并提 ...
- UVA Knight Moves
题目例如以下: Knight Moves A friend of you is doing research on the Traveling Knight Problem (TKP) where ...
- 【VBA研究】变量定义的类型和实际赋值类型
作者:iamlaosong VBA中变量能够先定义后使用,也能够不定义直接使用.假设模块前面加了Option Explicit语句,则变量必须先定义后使用. 只是.实验发现.VBA对变量类型没有进行严 ...
- QT线程(一):线程类
线程之间共享数据,但又单独执行: QT线程QThread是平台无关的: 通常主线程从main开始执行,而在主线程中创建其他线程,其他线程派生于QThread: 1.线程优先级 总共8个优先级:线程 ...
- 动作之CCActionInstant(立即动作)家族
立即动作就是不需要时间,马上就完成的动作.立即动作的共同基类是CCActionInstant.CCActionInstant的常用子类有: CCCallFunc:回调函数包装器 CCFlipX:X轴翻 ...
- 精灵类(CCSprite)
一.对精灵的理解 玩家控制的主角.AI控制的NPC,以及地图上的宝箱.石块,甚至游戏主菜单的背景图片都是精灵.因此,可以这样认为,玩家看到的一切几乎都是由精灵构成的. 精灵不一定是静态的.通常,一个精 ...
- HDU2076
夹角有多大(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...