html 毛笔书写效果,canvas 手写毛笔字效果
#canvasId {
background-color: #FFFFcc;
}
function Handwriting(id) {
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext("2d");
this.ctx.fillStyle = "rgba(0,0,0,0.25)";
var _this = this;
this.canvas.onmousedown = function (e) { _this.downEvent(e)};
this.canvas.onmousemove = function (e) { _this.moveEvent(e)};
this.canvas.onmouseup = function (e) { _this.upEvent(e)};
this.canvas.onmouseout = function (e) { _this.upEvent(e)};
this.moveFlag = false;
this.upof = {};
this.radius = 0;
this.has = [];
this.lineMax = 30;
this.lineMin = 3;
this.linePressure = 1;
this.smoothness = 80;
}
Handwriting.prototype.clear = function () {
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
}
Handwriting.prototype.downEvent = function (e) {
this.moveFlag = true;
this.has = [];
this.upof = this.getXY(e);
}
Handwriting.prototype.moveEvent = function (e) {
if (!this.moveFlag)
return;
var of = this.getXY(e);
var up = this.upof;
var ur = this.radius;
this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)});
var dis = 0;
var time = 0;
for (var n = 0; n < this.has.length-1; n++) {
dis += this.has[n].dis;
time += this.has[n].time-this.has[n+1].time;
if (dis>this.smoothness)
break;
}
var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax) / 2;
this.radius = or;
this.upof = of;
if (this.has.length<=4)
return;
var len = Math.round(this.has[0].dis/2)+1;
for (var i = 0; i < len; i++) {
var x = up.x + (of.x-up.x)/len*i;
var y = up.y + (of.y-up.y)/len*i;
var r = ur + (or-ur)/len*i;
this.ctx.beginPath();
this.ctx.arc(x,y,r,0,2*Math.PI,true);
this.ctx.fill();
}
}
Handwriting.prototype.upEvent = function (e) {
this.moveFlag = false;
}
Handwriting.prototype.getXY = function (e)
{
return {
x : e.clientX - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
y : e.clientY - this.canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)
}
}
Handwriting.prototype.distance = function (a,b)
{
var x = b.x-a.x , y = b.y-a.y;
return Math.sqrt(x*x+y*y);
}
var hw = new Handwriting("canvasId");
hw.lineMax = 40;
hw.lineMin = 5;
hw.linePressure = 2.5;
hw.smoothness = 100;
html 毛笔书写效果,canvas 手写毛笔字效果相关推荐
- canvas 手写毛笔字效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- Compose 实现手写春联效果
前言 又是一年新春,在这里先给大家拜个早年了.每逢春节,写春联贴春联都是一项必不可少的活动.本次主要使用Compose,实现手写春联的效果.如果对你有所帮助,欢迎点个赞或者评论鼓励一下~ 爆竹声中一岁 ...
- 用Compose实现手写春联效果
/ 今日科技快讯 / 近日,尽管"元宇宙"这个词已经存在了近30年,但直到Facebook在2021年10月下旬更名为Meta,似乎才重新点燃了投资者对它的兴趣.其中,虚拟 ...
- 在线签名、canvas手写在线签名——小程序端实现在线签名,手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
- html5 canvas手写画板 下载图片至本地
html5 canvas手写画板 下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- 文字描边加粗_用AE制作动态手写文字效果
现在很多设计师在设计logo或者字体的时候,已经不单纯的停留在固定不动的状态,而是添加了很多动效来提升作品的视觉效果.以现在流行的动效设计来看,可以分为三类:交互动效.MG动效.后期动效. 交互动效: ...
- html 手写字效果,canvas画布实现手写签名效果的示例代码
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: 手写区 清除 确定 CSS样式: .mSign_signMark_box{padding: 15p ...
- Adobe Premiere基础-常用的视频特效(边角定位,马赛克,模糊,锐化,手写工具,效果控件层级顺序)(十六)
边角定位 这个特效非常好使,可以将很多视频都融入到当前视频的场景中,当做广告,操作方式很简单 先在效果里搜索边角定位 我们准备一个素材 然后将边角定位拖动到,自己准备的素材上,然后在效果控件中点击文字 ...
- 俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮 上 下 左 右 2.js部分 1 ...
- canvas 插件_基于Angular的Canvas手写签名插件
灵感来源 之前, 在轻流的业务中遇到了一个需求, 是能够让客户使用手写签名的功能. 签名演示 问题来了, 这...我不会啊! 这得是Canvas了吧. 正所谓, 插件用的好, 下班走的早. 于是我就开 ...
最新文章
- 一篇文章教会你利用Python网络爬虫获取Mikan动漫资源
- 未来十年 智慧交通仍将持续引领城市建设高潮
- selenium教程
- 解锁三星bl锁有几种方法_三星S6解锁教程_三星GALAXY S6怎么解锁Bootloader的方法
- 最优化作业第六章——共轭梯度法和鲍尔法
- linux oracle swd.oui,centos7安装oracle11g报错,请问怎么解?
- LeetCode 1642. 可以到达的最远建筑(二分查找 / 优先队列贪心)
- mysql客户端修改sqlmode_MySQL修改sql_mode
- python bool 转vc int_史上最全的 Python 3 类型转换指南
- thinkphp5 图片压缩旋转_有非常多的图片,该怎么制作PPT?
- i18n调用自己参数_Spring Boot :I18N
- 一.对ThreadLocal的理解
- C#正则表达式小结 - z
- 简单的JSON解析工具
- win10没有realtek高清晰音频管理器_千万小心:山寨Win10更新工具正作祟!
- AE快速输出GIF动图格式插件:GifGun for Mac(支持ae2022)
- Android-2-控件使用
- Docker Harbor——拥有独特UI界面的私有仓库
- 自动合并table中相同的单元格以及java自动合并excel相同单元格
- PCA为什么要进行中心化
热门文章
- 影像自动解译_遥感影像的解译-分类
- 四六级对计算机考研有影响吗,“考研”没过四六级,对考研有影响吗?
- golang通过浏览器操作服务器中文件
- 光纤猫上的LOS灯红色闪烁解决方法
- 浙江大学计算机学院就业办,浙江大学就业信息网
- juniper 设备查看光衰的命令
- mac QQ 语音或视频时其他声音变小的解决办法
- fullpage.js版本3.0.9报错问题(licenseKey)
- linux文件恢复工具下载_十大最佳Linux数据恢复工具,用于恢复已删除/损坏的文件(包括优盘,部分工具不支持FAT32等格式)
- QQ空间人气精灵王 QQ空间人气提升