canvas 签名

最新推荐文章于 2024-08-13 16:15:07 发布

亨呢还要悟再谦虚点

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量127

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/u013194063/article/details/104881608

版权

<!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签名的视频

现总结附上源码

亨呢还要悟再谦虚点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 签名

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content=" height = device-hei...
复制链接

扫一扫