HTML5を使ったお絵かきボードの作り方入門_html5チュートリアルスキル

最初に注意すべきことは、マウスを使用して描画しているのではなく、iPad などのタッチ デバイス上で指を使用して描画しているということです。

お絵描きボードを作成するには、当然 HTML5 キャンバスを使用します。キャンバスでは、円、長方形、カスタム線などを描画できます。今回は主に円と線の描画を使用してそれを実現します。タッチ イベントへの応答は HTML でサポートされています。

onTouchStart タッチスタート

onTouchタッチスライドを移動

onTouchEnd タッチ終了

これらのイベントを使用すると、ブラウザーで指で描画することが非常に簡単になります。

IPAD への影響:

アイデア: 指が画面に触れると、onTouchStart イベントで指が触れた位置に円を追加し、指がスライドし始めると、前のタッチ ポイントから次のタッチ ポイントに連続的に移動します。 onTouchMove の点線。

HTML:

コードをコピー

コードは次のとおりです:

;

JS:

コードをコピー

コードは次のとおりです:

//get Canvas
var Canvas = document.getElementById("canvas");
//全画面
canvas.width= window.innerWidth ;
canvas.height=window.innerHeight;
//タッチがサポートされているかどうか
var touchable = 'createTouch' in document;
if (touchable) {
Canvas.addEventListener ('touchstart' , onTouchStart, false);
Canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
alert("touchable は false !") ;
}
//ラストタッチ座標
var lastX;
var lastY;

var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//ブラシの太さ
ctx.ストロークStyle="#FF0000";//ブラシの色

//タッチ開始イベント
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[ 0].clientY;
drawRound(lastX,lastY);

}
//タッチスライディングイベント
function onTouchMove(event) {
try
{
event.preventDefault();
drawLine(lastX,lastY,event. touchs[0].clientX,event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
catch(err){
alert(err.description);
}

}

//円を描く
functiondrawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc ( x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
// 線を描く
関数drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx .lineTo(endX,endY);
ctx.ストローク();
}

キーポイント:

ctx.lineCap="round"; 描いた線の終端のスタイルキャップを丸く設定します。これは非常に重要です。そうしないと、線の角度が大きく変化する場所で途切れが生じてしまいます。

event.preventDefault(); イベントのデフォルトのアクションをキャンセルします。このメソッドはスライディング イベントで呼び出す必要があります。そうしないと、スライド時にブラウザのデフォルトのスライド イベントがトリガーされ、ページが引き下げられ、描画できなくなります。