开发一套在线纸笔系统，随时随地在线写春联

最新推荐文章于 2024-09-23 23:12:11 发布

原创

最新推荐文章于 2024-09-23 23:12:11 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #html

本文介绍了开发一套在线纸笔系统，旨在实现随时随地在线写春联的功能。系统利用canvas进行画布操作，通过监听鼠标或触摸事件模拟书法效果，支持字体粗细变化、动态调整字数，并能保存或下载作品。需求包括平滑的字体粗细变化、不断墨及保存功能。代码中详细展示了布局、初始化、字体设置和监听事件的实现。

前言

快过年了，辞旧迎新，无论是城市还是农村，家家户户都要贴春联。手写村联更是别有趣味，传统的纸笔必不能随身携带想写就写，鉴于此开发一套在线纸笔系统，可以随时随地掏出手机就能写春联，写的好的可以下载存到本地，甚至可以到打印社直接的打印出来。

效果展示

在这里插入图片描述

作品展示

在这里插入图片描述

需求分析

字体有粗细，写的块则细，写的慢则粗
字迹不能有断墨
字体粗细变化要平滑
可以动态调整字数
可以将写好的春联保存成图片

代码开发

使用canvas作为春联主体画布，通过鼠标或触摸事件在canvas上画曲线以写出春联，通过监听鼠标或触摸滑动的速度控制曲线的粗细以达到类似毛笔写春联的效果。

春联布局

canvas作为春联画布主体，另外设置三个按钮分别提供重置画布、修改春联字数、下载已写好的春联图片到本地。

<div id="div" style="position: relative">
    <canvas id="canvas">你的浏览器不支持canvas</canvas>
    <div id="controller">
        <div id="clear_btn" class="op_btn" onclick ="changeNum()"> 字数</div>
        <div id="save_btn" onclick="downloadImage()" class="op_btn">保存</div>
        <div id="back_btn" class="op_btn" onclick="onReset()">重置</div>
        <div class="clearfix"></div>
    </div>
</div>

初始化春联

初始化春联canvas默认宽度为300,每个字为正方形即300 X 300,春联默认字数为7，春联上线留白50px, 春联的高度为：宽度 X 字数 + 100,代码如下。

var context;
var canvas;
var canvasWidth
var canvasHeight
//判断是否按下鼠标
var isMouseDown = false;
//记录上一次鼠标所在位置
var lasloc = {x: 0, y: 0};
var lasTimeStamp = 0;
var laslinewidth = -1;
var strokeColor = "black";
var num = 7;
$(function(){
    canvasWidth = 300;
    canvasHeight = canvasWidth * num + 100;
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    drawBackGround();
})

为canvas填充红色背景，在每个字体位置标识即高5px宽10px黑色背景的div,代码如下。

//设置背景及字体位置标识
function drawBackGround(){
    context.fillStyle = "red";
    context.fillRect(0,0,canvasWidth,canvasHeight);
    $(".tag").remove();
    var y = 50;
    for (var i = 0; i <= num; i++) {
        //具体的绘制，鼠标按下之后
        var divElement = document.createElement("div");
        divElement.style.background = "black";
        divElement.style.position = "absolute";
        divElement.style.top = y + "px";
        divElement.style.left = "0px";
        divElement.style.width = "10px";
        divElement.style.height = "5px";
        divElement.setAttribute("class","tag")
        $("#div").append(divElement);
        y +