js Canvas画板代码

Html

Css


    
    
         Line width :  Color :

   html,body {
	margin:0;
	padding:0;
}
.saveimg {
	text-align:center;
}
.saveimgs span {
	display:inline-block;
	margin-top:5px;
}

var mousePressed = false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
//      console.log(c)
//      console.log(c2)
var control = document.getElementsByClassName("control")[0];
var saveimgs = document.getElementsByClassName("saveimgs")[0];

window.onload = function() {
    InitThis();
}

var selected1, selected2;

function aaa() {
    var sel = document.getElementById('selWidth');
    var value = sel.selectedIndex;
    return selected1 = sel[value].value;
}

function aaa2() {
    var sel2 = document.getElementById('selColor');
    var value = sel2.selectedIndex;
    return selected2 = sel2[value].value;
}

function InitThis() {
    //          触摸屏
    c.addEventListener('touchstart', function(event) {
        console.log(1)
        if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            mousePressed = true;
            Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
        }

}, false);

c.addEventListener('touchmove', function(event) {
        console.log(2)
        if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (mousePressed) {
                Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
            }
        }

}, false);

c.addEventListener('touchend', function(event) {
        console.log(3)
        if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
            //                  var touch = event.targetTouches[0];
            mousePressed = false;
        }
    }, false);
    /*c.addEventListener('touchcancel', function (event) {
        console.log(4)
        mousePressed = false;
    },false);*/

//         鼠标
    c.onmousedown = function(event) {
        mousePressed = true;
        Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
    };

c.onmousemove = function(event) {
        if (mousePressed) {
            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
        }
    };

c.onmouseup = function(event) {
        mousePressed = false;
    };
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = selected2;
        ctx.lineWidth = selected1;
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

function clearArea() {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// 清除签名图片
    if (saveimgs.getElementsByTagName('span').length >= 1) {
        var clearImg = saveimgs.getElementsByTagName('span')[0];
        saveimgs.removeChild(clearImg);
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js Canvas画板代码



代码描述：可以用此画板手写签名、画图.课改画笔颜色和粗细、可清空画板

更新时间：2022-05-06 09:25:00

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

彼岸花

相关代码

js Canvas画板代码

最新