首先創建一個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.οnmοusedοwn=function(e){
e.preventDefault();
isMouseDown = true;
lastLoc = windowToCanvas(e.clientX, e.clientY);
lastTimestamp = new Date().getTime();
};
canvas.οnmοuseup=function(e){
e.preventDefault();
isMouseDown = false;
};
canvas.οnmοuseοut=function(e){
e.preventDefault();
isMouseDown = false;
};
canvas.οnmοusemοve=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;
}
運行之後的效果圖
