キャンバス要素に描画するプラグインがあります。しかし、私はキャンバス要素の機能部分に慣れていません。キャンバスに描かれた曲線を改善するには、どこにベジェ曲線メソッドを記述すればよいか知りたいです。サンプルコードは次のとおりです。
jQuery( window ).load(function(){
setTimeout(
function(){
window.scrollTo( 0, 0 );
},
100
);
}
);
// When The DOM loads, initialize the scripts.
jQuery(function( $ ){
var restorePoints = [];
var canvas = $( "canvas" );
var a=false;
var b,c="";
var d=document.getElementById("can");
var e=d.getContext("2d");
e.strokeStyle="black";
e.lineWidth=3;
e.lineCap="round";
e.fillStyle="rgba(0, 0, 200, 0)";
e.fillRect(0,0,d.width,d.height);
$("#bsz").change(function(a){e.lineWidth=this.value; });
$("#bcl").change(function(a){e.strokeStyle=this.value; window.location.hash = '#';});
//$("#can").mousedown(function(d){saveRestorePoint();a=true;e.save();b=d.pageX-this.offsetLeft;c=d.pageY-this.offsetTop});
$(document).click(function(){a=false});
var isIPhone = (new RegExp( "iPhone", "i" )).test(
navigator.userAgent
);
var getCanvasLocalCoordinates = function( pageX, pageY ){
var position = canvas.offset();
return({
x: (pageX - position.left),
y: (pageY - position.top)
});
};
var getTouchEvent = function( event ){
return(
isIPhone ?
window.event.targetTouches[ 0 ] :
event
);
};
var onTouchStart = function( event ){
window.location.hash = '#';
var touch = getTouchEvent( event );
var localPosition = getCanvasLocalCoordinates(
touch.pageX,
touch.pageY
);
saveRestorePoint();
a=true;
e.save();
b=localPosition.x;
c=localPosition.y;
if(a==true){
e.beginPath();
e.moveTo(localPosition.x,localPosition.y);
e.lineTo(localPosition.x+1,localPosition.y+1);
e.stroke();
e.closePath();
b=localPosition.x;
c=localPosition.y;
}
lastPenPoint = {
x: localPosition.x,
y: localPosition.y
};
canvas.bind(
(isIPhone ? "touchmove" : "mousemove"),
onTouchMove
);
canvas.bind(
(isIPhone ? "touchend" : "mouseup"),
onTouchEnd
);
};
var OnClick = function( event ){
var touch = getTouchEvent( event );
var localPosition = getCanvasLocalCoordinates(
touch.pageX,
touch.pageY
);
lastPenPoint = {
x: localPosition.x,
y: localPosition.y
};
if(a==true){
e.beginPath();
e.moveTo(localPosition.x,localPosition.y);
e.lineTo(localPosition.x+1,localPosition.y+1);
e.stroke();
e.closePath();
b=localPosition.x;
c=localPosition.y;
}
};
var onTouchMove = function( event ){
var touch = getTouchEvent( event );
var localPosition = getCanvasLocalCoordinates(
touch.pageX,
touch.pageY
);
lastPenPoint = {
x: localPosition.x,
y: localPosition.y
};
if(a==true){
e.beginPath();
e.moveTo(localPosition.x,localPosition.y);
e.lineTo(b,c);
e.stroke();
e.closePath();
b=localPosition.x;
c=localPosition.y;
}
};
var onTouchEnd = function( event ){
canvas.unbind(
(isIPhone ? "touchmove" : "mousemove")
);
canvas.unbind(
(isIPhone ? "touchend" : "mouseup")
);
};
canvas.bind(
(isIPhone ? "touchstart" : "mousedown"),
function( event ){
onTouchStart( event );
return( false );
});