canvas 手写毛笔字效果
2016-03-03 18:47
253 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> canvas 手写毛笔字效果 </title> <style type="text/css"> #canvasId { background-color: #FFFFcc; } </style> </head> <body> <canvas id="canvasId" width="700" height="500"></canvas><br /> <input type="button" value="clear" onclick="hw.clear();" /> <script type="text/javascript"> 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 .dis; time += this.has .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; </script> </body> </html>
相关文章推荐
- mybatis调用orcale存储过程-传入多个参数返回单个字符
- 2016.3.3 软件开发基础
- iOS之九宫格设计(纯代码)
- UIWebView 的属性、方法的具体使用和详解 与JS的交互
- Android Cordova 插件开发之Cordova安装
- Android 异步网络请求导致的程序崩溃
- 算法代码实现之二分法查找,Java实现
- 蓝桥杯历届-古堡算式
- 39.递推练习: 菲波那契数列(2)
- 39.递推练习: 菲波那契数列(2)
- 39.递推练习: 菲波那契数列(2)
- 39.递推练习: 菲波那契数列(2)
- 39.递推练习: 菲波那契数列(2)
- 又一个有趣的mysql死锁测试与源码分析
- HDU 2853 最大匹配&KM模板
- leetcode之2sum
- poj 2187 Beauty Contest 经典题目:凸包+旋转卡壳
- 字符流读写文件
- 2016.3.2 软件开发基础
- linux磁盘与文件系统