利用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实现毛笔字帖(二), 跟大家真正实现毛笔写字的部分

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码) 整体动画效果预览

1K30
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

16060
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

30440
来自专栏Modeng的专栏

Canvas学习系列一:初识canvas

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

17330
来自专栏wOw的Android小站

[iOS] 圆形进度条及计时功能

用的贝塞尔曲线UIBezierPath来画,这个类支持画很多种形状,可以单独去尝试。

32220
来自专栏电光石火

Markdown 语法手册 (完整整理版)

1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: ...

1K120
来自专栏架构之路

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支...

34650
来自专栏小李刀刀的专栏

容易被误解的overflow:hidden

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上...

411110
来自专栏ytkah

Excel表格的35招必学秘技[配图]

一、让数据按需排序   如果你要将员工按其所在的部门进行排序,这些部门名称既的有关信息不是按拼音顺序,也不是按笔画顺序,怎么办?可采用自定义序列来排序。  ...

70380
来自专栏偏前端工程师的驿站

语义化HTML:p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp

一、元素语义                         p标签   W3C草案: The p element represents a paragrap...

26950

扫码关注云+社区

领取腾讯云代金券