android 简易涂鸦板,canvas实现的简易涂鸦板效果

用canvas实现的简易涂鸦板效果，用鼠标点击在画布上随意涂鸦

涂鸦

*{

margin: 0;

padding: 0;

}

#canvas1{

box-shadow: 0 5px 40px black;

}

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d')

canvas.onmousedown = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

context.beginPath();

context.moveTo(x,y);

canvas.onmousemove = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

console.log(x)

context.lineWidth = 5;

context.strokeStyle = "red";

context.lineTo(x,y);

context.stroke()

}

canvas.onmouseup = function () {

canvas.onmousemove = null;

}

}

涂鸦

#canvas1{

box-shadow: 0 5px 40px black;

}

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d')

canvas.onmousedown = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

context.beginPath();

context.moveTo(x,y);

canvas.onmousemove = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

console.log(x)

context.lineWidth = 5;

context.strokeStyle = "red";

context.lineTo(x,y);

context.stroke()

}

canvas.onmouseup = function () {

canvas.onmousemove = null;

}

}