网页绘图(适配移动端)

最新推荐文章于 2022-11-03 20:33:04 发布

Moatkon

最新推荐文章于 2022-11-03 20:33:04 发布

阅读量1.3k

点赞数

分类专栏：兴趣爱好程序源代码计算机文章标签： web 前端移动端

本文链接：https://blog.csdn.net/yangrunkangbla/article/details/50508433

版权

计算机同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

兴趣爱好

14 篇文章 0 订阅

订阅专栏

程序源代码

13 篇文章 1 订阅

订阅专栏

首先创建一个Web应用，并新建相关的文件，好了之后的目录结构如下图所示

这里写图片描述

index.jsp中的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>写个字呗</title>
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link href="css/handwriting.css" rel="stylesheet" type="text/css"/>
<!-- 移动端 -->
<meta name="viewport" 
    content="height = device-height,
             width = device-width,
             initial-scale = 1.0,
             minimum-scale = 1.0,
             maximum-scale = 1.0,
             user-scalable = no" />
</head>
<body>
    <canvas id="canvas">
        您的浏览器不支持canvas
    </canvas>
    <div id="controller">

        <div id="black_btn" class="color_btn color_btn_selected"></div>
        <div id="blue_btn" class="color_btn"></div>
        <div id="green_btn" class="color_btn"></div>
        <div id="red_btn" class="color_btn"></div>
        <div id="orange_btn" class="color_btn"></div>
        <div id="yellow_btn" class="color_btn"></div>

        <div id="clear_btn" class="op_btn">清 除</div>
        <div class="clearfix"></div>
    </div>
 <script  src="js/handwriting.js"></script>
</body>
</html>

handwriting.js中的代码

//定义宽和高
var canvasWidth = Math.min(800,$(window).width()-20); //适配移动端
var canvasHeight = canvasWidth;

//定义鼠标是否按下
var isMouseDown = false;
//定义上一次鼠标的位置
var lastLoc = {x:0,y:0}; //初始化为0
//定义时间戳
var lastTimestamp = 0;
//定义上一次线条的宽度
var lastLineWidth = -1;
//当前笔的颜色
var strokeColor = "black";

//拿到canvas
var canvas = document.getElementById("canvas");
//拿到相应的上下文绘图环境
var context = canvas.getContext("2d");

//设定画布的宽和高
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//适配移动端
$("#controller").css("width",canvasWidth+"px");

//绘制米字格
drawGrid();
//清除按钮操作
$("#clear_btn").click(
        function(e){
            context.clearRect(0,0,canvasWidth,canvasHeight);
            //重新绘制米字格
            drawGrid();
        }
);
$(".color_btn").click(
        function(e) {
            $(".color_btn").removeClass("color_btn_selected");
            $(this).addClass("color_btn_selected");
            strokeColor = $(this).css("background-color");
        }
);

//逻辑整合

/**
 * 开始
 */
function beginStroke(point){
    isMouseDown = true;
    lastLoc = windowToCanvas(point.x, point.y);
    lastTimestamp = new Date().getTime();
}
/**
 * 结束
 */
function endStroke(){
    isMouseDown = false;
}
/**
 * 绘图
 */
function moveStroke(point){
    //核心代码
    var curLoc = windowToCanvas(point.x,point.y);
    var curTimestamp = new Date().getTime();
    /****Draw Start****/
    context.beginPath();
    context.moveTo(lastLoc.x,lastLoc.y);
    context.lineTo(curLoc.x ,curLoc.y);

    //计算速度
    var s = calcDistance(curLoc, lastLoc);
    var t = curTimestamp - lastTimestamp;
    var lineWidth = calcLineWidth(t,s);
    context.strokeStyle = strokeColor;
    context.lineWidth = lineWidth;
    context.lineCap = "round"; //矩形的帽子 可以绘制出平滑的线条
    context.lineJoin = "round";
    context.stroke();
    /****Draw End****/
    lastLoc = curLoc;
    lastTimestamp = curTimestamp;
    lastLineWidth = lineWidth;
}
//鼠标事件
canvas.onmousedown=function(e){
    e.preventDefault();
    beginStroke({x:e.clientX,y:e.clientY});
};

canvas.onmouseup=function(e){
    e.preventDefault();
    endStroke();
};

canvas.onmouseout=function(e){
    e.preventDefault();
    endStroke();
};

canvas.onmousemove=function(e){
    e.preventDefault();
    if(isMouseDown){
        //可以绘图了
        moveStroke({x:e.clientX,y:e.clientY});
    }
};
//触控事件
canvas.addEventListener('touchstart',function(e){
    e.preventDefault();
    touch = e.touches[0];
    beginStroke({x:touch.pageX,y:touch.pageY});
});
canvas.addEventListener('touchmove',function(e){
    e.preventDefault();
    if(isMouseDown){
        //可以绘图了
        touch = e.touches[0];
        moveStroke({x:touch.pageX,y:touch.pageY});
    }
});
canvas.addEventListener('touchend',function(e){
    e.preventDefault();
    endStroke();
});


/**
 * 绘制米字格
 */
function drawGrid(){

    context.save();

    //绘制红色的正方形边框
    context.strokeStyle = "rgb(230,11,9)";

    context.beginPath();
    context.moveTo(3,3);
    context.lineTo(canvas.width - 3 ,3);
    context.lineTo(canvas.width - 3 ,canvas.height - 3);
    context.lineTo(3 ,canvas.height - 3);
    context.closePath();

    context.lineWidth = 6;
    context.stroke();

    //绘制米字格
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(canvasWidth,canvasHeight);

    context.moveTo(canvasWidth,0);
    context.lineTo(0,canvasHeight);

    context.moveTo(canvasWidth/2,0);
    context.lineTo(canvasWidth/2,canvasHeight);

    context.moveTo(0,canvasHeight/2);
    context.lineTo(canvasWidth,canvasHeight/2);

    context.lineWidth = 1;
    context.stroke();

    context.restore();
}
/**
 * 窗口到画布的位置
 */
function windowToCanvas(x,y){
    var bbox = canvas.getBoundingClientRect();
    return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
}

/**
 * 计算距离
 */
function calcDistance(loc1,loc2){
    return Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y));
}

/**
 * 计算笔的宽度
 */
var maxLineWidth = 20;
var minLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;
function calcLineWidth(t,s){
    var v = s/t;
    var resultLineWidth;
    if(v<=minStrokeV){
        resultLineWidth = maxLineWidth;
    }else if(v>=maxStrokeV){
        resultLineWidth = minLineWidth;
    }else{
        //使用差值的方式
        resultLineWidth = maxLineWidth-(v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth);
    }
    if(lastLineWidth == -1){
        return resultLineWidth;
    }
    return lastLineWidth*(2/3)+resultLineWidth*(1/3);
}

handwriting.css中的代码

#canvas{
    display: block;
    margin: 0 auto;
}
#controller{
    margin: 0 auto;
}
.op_btn{
    float:right;
    margin: 10px 0 0 10px;
    border:2px solid #aaa;
    width:80px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius:5px 5px;
    cursor:pointer;
    background-color: white;
    font-weight: bold;
    font-family: Microsoft Yahei,Arial;
}
.op_btn:hover{
    background-color: #def;
}
.clearfix{
    clear:both;
}

.color_btn{
    float:left;
    margin: 10px 10px 0 0;
    border: 5px solid white;
    width:40px;
    height: 40px;
    border-radius:5px 5px;
    cursor:pointer;
}
.color_btn:hover{
    border: 5px solid violet;
}
.color_btn_selected{
    border: 5px solid blueviolet;
}

#black_btn{
    background-color: black;
}
#blue_btn{
    background-color: blue;
}
#green_btn{
    background-color: green;
}
#red_btn{
    background-color: red;
}
#orange_btn{
    background-color: orange;
}
#yellow_btn{
    background-color: yellow;
}