文档章节

网页绘图(适配移动端)

杨润康Bla
 杨润康Bla
发布于 2016/05/18 18:04
字数 866
阅读 19
收藏 0
点赞 2
评论 0

首先创建一个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; }

运行之后的效果图

PC端
这里写图片描述

移动端
这里写图片描述

本文转载自:http://blog.csdn.net/yangrunkangbla/article/details/50508433

共有 人打赏支持
杨润康Bla
粉丝 14
博文 76
码字总数 0
作品 0
合肥
后端工程师
Html开发之Viewport的使用

近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试...

LCore ⋅ 2014/10/19 ⋅ 9

HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223 ⋅ 2017/08/25 ⋅ 0

如何建设一个适配“百度轻舟计划”的移动站

百度轻舟计划已经出来了,目的很明确,提升百度在移动端的影响力,初步删除PC端的网页,加强移动站的网页权重吗,该计划要实现的目标是移动搜索达到百分百移动化。去年百度siteapp、开发者中...

卢松松 ⋅ 2014/03/13 ⋅ 0

判断是否移动端设备的JS代码,超短,百度都用它

大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码各不相同,有长有短,主要是根据自己的编程习惯和网页...

fdhay ⋅ 2016/12/22 ⋅ 0

移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方 ⋅ 2017/12/26 ⋅ 0

移动app开发 和 网页适配移动端 有多大区别?

现在的移动app开发 是 android 开发+IOS开发 和 web 的网页 在移动端的适配 有多大区别? 哪一个更好,哪一个 更是主流 就是说 也是单独安装的app,但是 里面其实 里面 可以做成网页浏览,还...

Inszt ⋅ 2015/10/20 ⋅ 2

关于网页区分pc端和移动端,以及移动端各种适配问题

各位有哪个开发过一个web网页,在PC端上是没问题,但现在需要支持移动端的访问,应该还需要再开发一套UI吧,那么关于移动端各种版本(android,ios等版本),以及屏幕分辨率,横屏,触屏等各...

赛末点 ⋅ 2014/01/02 ⋅ 10

移动端解决方案--mobileHack

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案: 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备...

1354057778 ⋅ 2015/10/22 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 06/20 ⋅ 0

CSS布局说——可能是最全的

前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化...

zimo ⋅ 2017/09/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部