网页绘图(适配移动端)

来源：互联网发布：思讯收银软件下载编辑：程序博客网时间：2024/06/03 15:18

首先创建一个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";//拿到canvasvar 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;}

运行之后的效果图

PC端

移动端

0 0