代码封装基于 https://blog.csdn.net/javabaidu/article/details/84600901
进行了类封装,并且调整了笔尖的位置
(function (window) {
function WriteBoard(container, size, color) {
this.canvas = {};
this.board = {};
this.mousePress = false;
this.last = null;
WriteBoard.prototype.init = function () {
this.canvas = document.createElement("canvas");
container.appendChild(this.canvas);
this.canvas.width = container.clientWidth;
this.canvas.height = container.clientHeight;
this.board = this.canvas.getContext("2d");
this.board.lineWidth = size;
this.board.strokeStyle = color;
var _this = this;
var beginDraw = function () {
_this.beginDraw.call(_this);
};
var drawing = function (event) {
_this.drawing.call(_this, event);
};
var endDraw = function (event) {
_this.endDraw.call(_this, event);
};
this.canvas.onmousedown = beginDraw;
this.canvas.onmousemove = drawing;
this.canvas.onmouseup = endDraw;
this.canvas.addEventListener("touchstart", beginDraw, false);
this.canvas.addEventListener("touchmove", drawing, false);
this.canvas.addEventListener("touchend", endDraw, false);
};
if (!WriteBoard.prototype.__init__) {
WriteBoard.prototype.beginDraw = function () {
this.mousePress = true;
};
WriteBoard.prototype.drawing = function (event) {
event.preventDefault();
if (!this.mousePress) return;
var xy = this.pos(event);
if (this.last != null) {
this.board.beginPath();
this.board.moveTo(this.last.x, this.last.y);
this.board.lineTo(xy.x, xy.y);
this.board.stroke();
}
this.last = xy;
};
WriteBoard.prototype.endDraw = function (event) {
this.mousePress = false;
event.preventDefault();
this.last = null;
};
WriteBoard.prototype.pos = function (event) {
var x, y;
if (this.isTouch(event)) {
x = event.touches[0].pageX;
y = event.touches[0].pageY;
} else {
x = event.offsetX + event.target.offsetLeft;
y = event.offsetY + event.target.offsetTop;
}
return { x: x - 10, y: y - 10 }; // -10 为了让笔尖在鼠标尖
};
WriteBoard.prototype.isTouch = function (event) {
var type = event.type;
if (type.indexOf("touch") >= 0) {
return true;
} else {
return false;
}
};
WriteBoard.prototype.save = function () {
//base64
var dataUrl = this.canvas.toDataURL();
return dataUrl;
};
WriteBoard.prototype.clean = function () {
this.board.clearRect(
0,
0,
this.board.canvas.width,
this.board.canvas.height
);
};
WriteBoard.prototype.__init__ = true;
}
}
window.HandWriteBoard = function (container, size, color) {
var argLength = arguments.length;
var board = {};
if (argLength == 2)
board = new WriteBoard(container, size, "#333333");
else if (argLength == 3)
board = new WriteBoard(container, size, color);
else board = new WriteBoard(container, 5, "#333333");
board.init();
return board;
};
})(window);
使用:
<div id="myCanvas" style="width: 700px; height: 500px;border: 1px solid #999999;"></div>
<div>
<button onclick="clean();">清 空</button>
<button onclick="save();">生成图片</button>
</div>
<img id="img" alt="请涂鸦……" />
指定一个容器即可
var board = HandWriteBoard(document.getElementById("myCanvas"));
var img = document.getElementById("img");
function clean() {
board.clean();
img.src = "";
}
function save() {
var data = board.save();
img.src = data;
}