<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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"/>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<link href="test.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="test.js"></script>
</body>
</html>
var canvasWidth = Math.min( 800 , $(window).width() - 20 )
var canvasHeight = canvasWidth
var strokeColor = "black"
var isMouseDown = false
// 记录上一次鼠标的位置
var lastLoc = {x:0,y:0}
var lastTimeStamp = 0
var lastLineWidth = -1
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()
var s = calcDistance(curLoc, lastLoc)
var t = curTimeStamp - lastTimeStamp
var lineWidth = calcLineWidth(t, s)
// draw
context.beginPath()
context.moveTo(lastLoc.x,lastLoc.y);
context.lineTo(curLoc.x,curLoc.y)
context.strokeStyle = strokeColor
context.lineWidth = lineWidth
// 填补矩形连接时的空缺
context.lineCap = "round"
context.lineJoin = "round"
context.stroke()
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 calcDistance( loc1 , loc2 ){
return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) )
}
// 判断线条绘制时的距离
var maxLineWidth = 30;
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 resultLineWidth*1/3 + lastLineWidth*2/3;
}
// 获取点击后 在画布里面的坐标
function windowToCanvas( x , y ){
var bbox = canvas.getBoundingClientRect()
return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)}
}
function drawGrid() {
context.save()
context.strokeStyle = 'rgb(230,11,9)'
context.beginPath()
context.moveTo(3,3)
context.lineTo( canvasWidth - 3,3)
context.lineTo( canvasWidth - 3, canvasHeight -3)
context.lineTo( 3, canvasHeight - 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.setLineDash([10,15])
context.lineTo(canvasWidth, canvasHeight/2)
context.lineWidth = 1
context.stroke()
context.restore()
}
#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;
}
学习了一篇canvas签名的视频
现总结附上源码