文档章节

网页绘图 写一个字

杨润康Bla
 杨润康Bla
发布于 2016/05/18 18:04
字数 748
阅读 1
收藏 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"/>
</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 = 800;
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;

//绘制米字格
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");
        }
);


//鼠标事件
canvas.onmousedown=function(e){
    e.preventDefault();
    isMouseDown = true;

    lastLoc = windowToCanvas(e.clientX, e.clientY);
    lastTimestamp = new Date().getTime();
};

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

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

canvas.onmousemove=function(e){
    e.preventDefault();
    if(isMouseDown){
        //核心代码
        var curLoc = windowToCanvas(e.clientX, e.clientY);
        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;
    }
};

/** * 绘制米字格 */
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{ width: 800px; 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; }

运行之后的效果图
这里写图片描述

© 著作权归作者所有

共有 人打赏支持
杨润康Bla
粉丝 14
博文 76
码字总数 0
作品 0
合肥
后端工程师
WebKit技术内幕(笔记)

一:浏览器 1.渲染引擎: html解释器:主要作用是将HTML文本解释成DOM树 css解释器 :为DOM中的各个元素对象计算出样式信息,从而为计算后网页的布局提供基础设施 布局:在DOM创建之后,Webki...

前端小虾 ⋅ 2016/10/10 ⋅ 0

多线程总结

进入run()函数后,新线程就开始运行,有自己的堆栈。 出了run()函数后,新建的线程就结束,并会发出信号,可以在另外一个线程中捕获,然后响应。、 currentThreadId()和 currentThread()分别...

晨曦之光 ⋅ 2012/04/13 ⋅ 0

基于 HTML5 的 Dojo Widget 开发

简介: 当前的 Web 开发存在着两种趋势,一是基于 HTML、CSS 和 JavaScript 技术,比如以 Dojo 工具包、jQuery 等为基础的 HTML 页面;另一种是基于浏览器端运行时,如基于 Flash、Silverlig...

IBMdW ⋅ 2011/07/31 ⋅ 2

JavaScript绘图库--DrJs

DrJs是一个轻量级的JavaScript类库,它的主要功能为提供网页上基于DOM和CSS的绘图支持,在适当的地方使用它可以简化问题,提高开发效率。 DrJs适用于那些需要在网页上绘制一些简单的函数图形...

匿名 ⋅ 2009/11/04 ⋅ 0

图像编辑软件--GIMP

匿名 ⋅ 2008/09/18 ⋅ 4

GIMP 2.6.12 发布,图像处理程序

GIMP 2.6.12 发布,这是一个 bug 修复版本。这也是 Gimp 2.8 发布之前的最后一个稳定版本。 GIMP 是 GNU 图像处理程序(GNU Image Manipulation Program)的缩写。包括几乎所有图象处理所需的功...

红薯 ⋅ 2012/02/03 ⋅ 0

GIMP 2.6.9 发布,补丁修复

GIMP 是 GNU 图像处理程序(GNU Image Manipulation Program)的缩写。包括几乎所有图象处理所需的功能,号称Linux下的PhotoShop。GIMP在Linux系统推出时就风靡了许多绘图爱好者的喜爱,它的接...

红薯 ⋅ 2010/06/24 ⋅ 0

GIMP 2.8 RC1 发布,支持 GPU 硬件加速

GIMP 开发团队刚刚发布了 2.8 的首个 RC 版本,该版本更新到 GEGL (Generic Graphics Library) 开始支持 GPU 硬件加速。 GIMP 是 GNU 图像处理程序(GNU Image Manipulation Program)的缩写。...

红薯 ⋅ 2012/04/11 ⋅ 7

GIMP 2.8.14 发布,图像编辑软件

GIMP 2.8.14 发布,此版本只是修复了 libtoolt 的版本控制,其他的与 GIMP 2.8.12 版本没有区别,获取最新版本: http://download.gimp.org/pub/gimp/v2.8/gimp-2.8.14.tar.bz2.torrent GIM...

oschina ⋅ 2014/08/27 ⋅ 22

GIMP 2.9 (2.10 开发版) 发布

GIMP 2.9 发布了,该版本也是 2.10 的开发版。2.10 主要的新特性是完全移植到 GEGL / high bit depths ,支持 16位和32位的每色通道模式,包括整数和浮点数。 GIMP 是 GNU 图像处理程序(GNU ...

oschina ⋅ 2013/10/25 ⋅ 17

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring Email

一、普通邮件 maven依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>4.2.6.RELEASE</version>......

BobwithB ⋅ 10分钟前 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 13分钟前 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 13分钟前 ⋅ 0

IT行业的变革就像世界杯德国对战墨西哥一样难以预测[图]

最近在观看世界杯,尤其是昨天的比赛,上一届卫冕冠军德国队居然0:1告负墨西哥,这创造了历史,首先是墨西哥从来没赢过德国队,其次是德国队36年来首站没输过,再差也是打平,而这次,德国队...

原创小博客 ⋅ 33分钟前 ⋅ 0

解决CentOS6、7,/etc/sysconfig/下没有iptables的问题

一、Centos 6版本解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service iptables save 3.重启iptables服务: service ...

寰宇01 ⋅ 43分钟前 ⋅ 2

数据库备份和恢复

备份:mysqldump -u root -p 数据库>磁盘路径 恢复:mysql -u root -p 数据库<sql脚本的磁盘路径

anlve ⋅ 今天 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部