同様のタイプの署名を描画するのに役立つjqueryプラグインまたはその他が必要です。そのようなプラグインをどこで見つけることができますか?
質問する
1999 次
2 に答える
4
MDNを使用すると、より滑らかで自然な「曲線」ラインを実現できます。context.quadraticCurveTo()
ちょうど、quadraticCurveToは一定の太さしか持てないので、以下を使用することで、線を簡単に変更して色合いのペンの角度や圧力効果を作成することはできません。
var board = {
width: 560,
height: 190
};
var pen = {
color: "rgb(0, 0, 0)",
size: 2
};
var pts = [];
var isDown = false;
var isTouch = false;
var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');
var cvs2 = document.createElement('canvas');
var ctx2 = cvs2.getContext('2d');
cvs.width = cvs2.width = board.width;
cvs.height = cvs2.height = board.height;
function penDown(ev) {
ev.preventDefault();
isTouch = ev.type === "touchstart";
ev = isTouch ? ev.touches[0] : ev;
isDown = true;
pts.push({
x: ev.clientX,
y: ev.clientY
});
drawPoints();
}
function penMove(ev) {
ev.preventDefault();
ev = isTouch ? ev.touches[0] : ev;
if (isDown) {
ctx.clearRect(0, 0, board.width, board.height);
ctx.drawImage(cvs2, 0, 0); // Draw to inmemory cvs2
pts.push({
x: ev.clientX,
y: ev.clientY
});
drawPoints();
}
}
function penUp(ev) {
ev.preventDefault();
isDown = isTouch = false;
pts = [];
// Save state to in-memory cvs2
ctx2.clearRect(0, 0, board.width, board.height);
ctx2.drawImage(cvs, 0, 0);
}
function clear() {
ctx.clearRect(0, 0, board.width, board.height);
ctx2.clearRect(0, 0, board.width, board.height);
}
function drawPoints() {
var i = 0;
var i2 = pts.length > 1 ? 1 : 0;
ctx.beginPath();
ctx.lineWidth = pen.size;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.moveTo(pts[0].x, pts[0].y);
for (; i < pts.length - i2; i++) {
ctx.quadraticCurveTo(
pts[i].x,
pts[i].y,
(pts[i].x + pts[i + i2].x) / 2,
(pts[i].y + pts[i + i2].y) / 2
);
}
ctx.strokeStyle = pen.color;
ctx.stroke();
ctx.closePath();
}
// EVENTS
cvs.addEventListener('touchstart', penDown);
cvs.addEventListener('touchmove', penMove);
cvs.addEventListener('touchend', penUp);
cvs.addEventListener('mousedown', penDown);
cvs.addEventListener('mousemove', penMove);
cvs.addEventListener('mouseup', penUp);
document.getElementById("clear").addEventListener("click", clear);
body {margin:0;}
#canvas{display: block; box-shadow: inset 0 0 0 2px #ccc;}
#clear {position: absolute; top:0; left: 0;}
<canvas id='canvas'></canvas>
<button id="clear">CLEAR</button>
于 2012-11-27T12:52:08.707 に答える
2
于 2012-11-27T12:16:53.250 に答える