利用canvas实现毛笔字帖(一)
最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列canvas教程中,我学到不少知识。 今天,运用在视频中的所学,结合自己的代码风格,我自己尝试也写一个字帖出来,在这里分享一下思路和过程 具体代码其实已经push在github上,感兴趣的可以clone下来参考一下。 代码/canvas-demo/write 这里还有在线的效果演示 在线演示
想法
在canvas在实现这样一个效果,有一个米字格,可以用鼠标(pc)甚至手指(手机)在上面写字,字要有点像毛笔字。 下面有控制部件,可以控制笔的颜色,还是可以清空米字格的墨迹。
下面就开始着手去写了。
代码
css和html部分不是很多,也不是我要讲的重点,简单贴出来
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毛笔字</title>
<meta name="viewport" content="width=device-width;height=device-height;initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/write.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvas">
您的浏览器版本不支持canvas,请更新或者下载chrome
</canvas>
<div id="controller">
<div id="black" class="on"></div>
<div id="red"></div>
<div id="green"></div>
<div id="yellow"></div>
<div id="purple"></div>
<div id="orange"></div>
<div id="blue"></div>
<div id="indigo"></div>
<button id="reset">清除</button>
</div>
</body>
</html>
css
#canvas{
display: block; margin: 20px auto; border: #ff1722 5px solid;
}
/*控制器*/
#controller{
text-align: center;
}
#controller>div{
display: inline-block; width: 30px; height: 30px; border: gray 2px solid;
}
#black{
background: black;
}
#red{
background: red;
}
#green{
background: green;
}
#yellow{
background: yellow;
}
#purple{
background: purple;
}
#orange{
background: orange;
}
#blue{
background: blue;
}
#indigo{
background: indigo;
}
#controller>div.on{
border-color: red;
}
#reset{
display: inline-block; vertical-align: top; width: 50px; height: 34px;
}
javascript
js部分就很关键了,涉及到很多api,交互流程,编程思路,下面慢慢来讲:
一、 按功能设计代码模块
首先,按照功能分类,我们将代码分成3个模块
1. 第1部分paper.js
负责绘制出米字格的字帖背景
代码设计属性如下
paper.js
var paper = {
canvas: null,//html中的canvas对象,主要标签
context: null, //canvas对象获取的context,用于绘图
init: function (canvas) {
//初始化方法
},
drawPaper: function(){
//绘制米字格图纸的接口
},
drawDotted: function(sx, sy, ex, ey){
//绘制虚线的接口
}
};
2. 第2部分controller.js
负责控制画笔的颜色和清理画布,即控制面板的功能实现。
代码设计属性如下
controller.js
var controller = {
canvas: null,//html中的canvas对象,主要标签
context: null, //canvas对象获取的context,用于绘图
init: function (canvas) {
//初始化方法
},
bindEvent: function () {
//事件监听的设置区域
},
setColor: function (target) {
//设置画笔颜色的接口
},
clear: function () {
//清理画布墨迹的接口
}
};
3. 第3部分write.js
第三部分也是最关键最复杂的部分,负责描绘出鼠标(手指)划过的笔画
因为要协调笔画,会用到比较多的辅助函数和辅助参数,下面会一一介绍
write.js
var write = {
canvas: null, //html中的canvas对象,主要标签
context: null, //canvas对象获取的context,用于绘图
isWriting: false,//是否正在下笔写字
lineWidthMax: 0, //画笔最大粗细
lineWidthMin: 1, //画笔最小粗细
lastX: 0,//画笔上次停留位置
lastY: 0,
lastTime: 0, //上次移笔时间
lastLineWidth: 0,//上次画下的笔宽
init: function (canvas) {
//初始化方法
},
bindEvent: function () {
//事件监听的设置区域
},
//描绘区
startWrite: function (co) {
//开始落笔
},
writing: function (co) {
//笔移动,正在写字
},
endWrite: function(){
//收笔
},
//辅助函数区
getCo: function (clientX, clientY) {
//返回落笔的位置
},
getS: function (sx, sy, ex, ey) {
//返回两点间的距离
},
getLineWidth: function (s, t) {
//计算笔迹的线条宽度
}
};
二、 根据功能需要完善代码
1. 第1部分paper.js
针对paper模块,我们知道,是用来设置字帖纸的样式的。
我们要做的有两步
- 一、 根据屏幕宽度设置米字格大小,兼容pc和手机
- 二、 用虚线绘制出米字 (边框线条已经用css实现了)
初始化方法init()
是一个模块最开始的地方。我们从 init
开始,边看代码边解释
外接通过编写如下代码调用paper,完成其初始化,并让运行
var canvas = document.getElementById('cnavas');
paper.init(canvas);
所以我们在paper.init中接受外界传来的canvas,并利用它完成初始化,运行绘制方法,编写如下
var paper = {
canvas: null,//html中的canvas对象,主要标签
context: null, //canvas对象获取的context,用于绘图
init: function (canvas) {
this.canvas = canvas;//接收外界canvas,赋值给自己的属性``canvas``,在下面的其他方法中需要用到
this.context = canvas.getContext('2d');//通过canvas获取context,赋值给自己的属性``context``,在下面的其他方法中需要用到
//动态设置canvas大小,兼容手机和pc
this.canvas.width = Math.min(500, window.innerWidth - 20);// 米字格最大只能为500px
this.canvas.height = this.canvas.width;
this.drawPaper(); //绘制米字格背景,自己完善drawPaper方法
},
drawPaper: function() {},
drawDotted: function(sx, sy, ex, ey){}
//......
};
drawPaper()
方法就更加简单了,只需要调用drawDotted()
接口绘制线段就可以了
//...
drawPaper: function(){
this.drawDotted(0, 0, this.canvas.width, this.canvas.height);//左上角到右下角的斜线
this.drawDotted(this.canvas.width, 0, 0, this.canvas.height);//左下角到右上角的斜线
this.drawDotted(this.canvas.width/2, 0, this.canvas.width/2, this.canvas.height);//中间的横线
this.drawDotted(0, this.canvas.height/2, this.canvas.width, this.canvas.height/2);//中间的竖线
},
drawDotted: function(sx, sy, ex, ey){}
//...
drawDotted()
实现起来需要自己构思了,最新的h5标准已经有setLineDash用来绘制虚线,ie11以上都行,支持性不错,但是为了兼容,我们也尝试手写一些虚线函数出来
//···
drawDotted: function(sx, sy, ex, ey){
var lineInterval = 5;//虚线的间隔
this.context.save();//保存当前的context状态(快照,用于恢复,防止状态设置紊乱污染)
this.context.lineWidth = 3;//线宽
this.context.strokeStyle = '#ff1722';//线条颜色
//setLineDash 虚线设置接口比较新,为了保险起见,自己编写一下
if(this.context.setLineDash){ // 使用h5的setLineDash方法
this.context.setLineDash([lineInterval, lineInterval]);//[线宽, 间隔宽]
this.context.moveTo(sx,sy);
this.context.lineTo(ex,ey);
}
else{//setLineDash不存在,自己手动处理
//len 虚线要绘制成多少段
var len = Math.ceil(Math.sqrt((ex - sx)*(ex - sx) + (ey - sy)*(ey - sy)) / lineInterval /2);
var lineIntervalX = (ex - sx) / len;//每一段间x轴上的间隔
var lineIntervalY = (ey - sy) / len;//每一段间y轴上的间隔
var index = 0;//计数器
this.context.beginPath();
while (index < len) {//开始定制路线
var targetX = sx + lineIntervalX;//计算当前段绘制的终点
var targetY = sy + lineIntervalY;
this.context.moveTo(sx, sy);//起点
this.context.lineTo(targetX, targetY);//终点
sx = targetX + lineIntervalX;//计算下一段绘制的起点
sy = targetY + lineIntervalY;
index ++;
}
}
this.context.stroke();//绘制线条
this.context.restore();//恢复保存的状态,对应 save() 方法
}
//···
如此,一个米字格图纸的绘制方法已经完成了,下面的代码汇总
var paper = {
canvas: null,//html中的canvas对象,主要标签
context: null, //canvas对象获取的context,用于绘图
init: function (canvas) {
this.canvas = canvas;//接收外界canvas,赋值给自己的属性``canvas``,在下面的其他方法中需要用到
this.context = canvas.getContext('2d');//通过canvas获取context,赋值给自己的属性``context``,在下面的其他方法中需要用到
//动态设置canvas大小,兼容手机和pc
this.canvas.width = Math.min(500, window.innerWidth - 20);// 米字格最大只能为500px
this.canvas.height = this.canvas.width;
this.drawPaper(); //绘制米字格背景,自己完善drawPaper方法
},
drawPaper: function(){
this.drawDotted(0, 0, this.canvas.width, this.canvas.height);//左上角到右下角的斜线
this.drawDotted(this.canvas.width, 0, 0, this.canvas.height);//左下角到右上角的斜线
this.drawDotted(this.canvas.width/2, 0, this.canvas.width/2, this.canvas.height);//中间的横线
this.drawDotted(0, this.canvas.height/2, this.canvas.width, this.canvas.height/2);//中间的竖线
},
drawDotted: function(sx, sy, ex, ey){
var lineInterval = 5;//虚线的间隔
this.context.save();//保存当前的context状态(快照,用于恢复,防止状态设置紊乱污染)
this.context.lineWidth = 3;//线宽
this.context.strokeStyle = '#ff1722';//线条颜色
//setLineDash 虚线设置接口比较新,为了保险起见,自己编写一下
if(this.context.setLineDash){ // 使用h5的setLineDash方法
this.context.setLineDash([lineInterval, lineInterval]);//[线宽, 间隔宽]
this.context.moveTo(sx,sy);
this.context.lineTo(ex,ey);
}
else{//setLineDash不存在,自己手动处理
//len 虚线要绘制成多少段
var len = Math.ceil(Math.sqrt((ex - sx)*(ex - sx) + (ey - sy)*(ey - sy)) / lineInterval /2);
var lineIntervalX = (ex - sx) / len;//每一段间x轴上的间隔
var lineIntervalY = (ey - sy) / len;//每一段间y轴上的间隔
var index = 0;//计数器
this.context.beginPath();
while (index < len) {//开始定制路线
var targetX = sx + lineIntervalX;//计算当前段绘制的终点
var targetY = sy + lineIntervalY;
this.context.moveTo(sx, sy);//起点
this.context.lineTo(targetX, targetY);//终点
sx = targetX + lineIntervalX;//计算下一段绘制的起点
sy = targetY + lineIntervalY;
index ++;
}
}
this.context.stroke();//绘制线条
this.context.restore();//恢复保存的状态,对应 save() 方法
}
};
如此,在html中调用 paper.init(canvas), 一个米字格就会成功绘制在你的面前,是不是很简单又有趣
边幅有点长,这是绘制的第一部分,我们在接下来的一篇博客里再讲第二部分,请期待 利用canvas实现毛笔字帖(二), 跟大家真正实现毛笔写字的部分
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 程序员必读:Git提交信息和分支创建规范
- 使用brew cask安装minikube的各种错误和解决方法
- 编写高质量可维护的代码:一目了然的注释
- SAP Hybris - how to find corresponding cronjob for a given import
- Linux与Windows间文件互传之TFTP方式
- 假设检验在数据分析中的应用
- 【前端开发】文本阴影:如何使用text-shadow实现首字线索引效果?
- 9.25【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?
- 竞赛比完,代码、模型怎么处理?Kaggle大神:别删,这都是宝藏
- 9.26【前端开发】背景属性:样式中背景色和背景图片样式如何使用?
- 9.27【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?
- 9.28【前端开发】文本属性:如何使用文本阴影等样式?
- 9.29【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?
- Angular input控件的click事件表达式如何被转换成JavaScript函数
- Angular input控件的click事件响应处理的调用上下文