Canvas画板---携帯でも使える画板

画板を作ることを学ぶ前に、canvasラベル1を理解してみましょう.canvasラベル1.canvasラベルはimgラベルと似ていますが、canvasラベルは閉じたラベルであり、src alt属性はありません.2.canvasラベルには2つのプロパティがあります.width,height.ページ上でcanvasでキャンバスを描くときにwidth、heightプロパティを適用してサイズを設定し、cssで設定すると画像を描くときに歪みが発生する可能性があります.3.レンダリングコンテキストcontext canvasは最初は空白でした.表示するには、まずスクリプトがレンダリングコンテキストを見つけ、その上に描画する必要があります.getContext()メソッドはコンテキストcontextを取得することができる.
二.画板画板を作る機能:異なる色と太さの線を描くことができ、画板には消しゴム機能、ワンタッチクリア機能、ダウンロード機能があります.
1.まず、画面幅に合わせてキャンバスを描く必要があります.

 function wResize() {
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight

        canvas.width = pageWidth
        canvas.height = pageHeight
    }

2.ユーザーが画板に絵を描く時、3種類の状態があり、マウスクリック状態、マウス移動動態、マウス離れ状態である.mousedown,mousemove,mouseupを用いて3つの状態を傍受することができる.
ユーザーがマウスをクリックすると、次のようになります.

  canvas.onmousedown = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                using = true;//    ，        
                if (eraserEnabled) {//         ，       
                    context.clearRect(x, y, 20, 20);
                }
                else {          
                    lastPoint = {x: x, y: y}
                }
            }

ユーザーがマウスを動かすと、次のようになります.

  canvas.onmousemove = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                if (!using) {return}//        
                if (eraserEnabled) {//         ，       
                    context.clearRect(x, y, 20, 20);
                }
                else{//         
                    var newPoint = {"x": x, "y": y};//           
                    drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //    
                    lastPoint = newPoint;//               
                }
            }

マウスを離すと、

  canvas.onmouseup = function (a) {
                using = false;//    ，       
            }

3.直線を描く

function drawLine(x1, y1, x2, y2) {
    context.beginPath();//      ，    
    context.moveTo(x1, y1);//    
    context.lineWidth = lineWidth ;//      
    context.lineTo(x2, y2);//    
    context.stroke();
    context.closePath();//    ，    
}

stroke():線で図形の輪郭を描きます.fill():パスの内容領域を塗りつぶしてソリッドなグラフィックを生成する
4.ブラシ機能

pen.onclick = function(){
    eraserEnabled = false;//    ，        
    pen.classList.add('active');//              
    eraser.classList.remove('active');//               

}

5.消しゴム機能

eraser.onclick = function(){
    eraserEnabled = true;//       
    eraser.classList.add('active');//               
    pen.classList.remove('active');//              
}

6.ワンタッチクリア機能

clear.onclick = function(){
    context.clearRect(0,0,canvas.width,canvas.height);
}

ここではclearRect(x,y,width,height)法を用いて,指定された矩形領域をクリアし,クリア部分を完全に透明にする.x,y座標は実座標,width,heightはクリア矩形領域の大きさである.
7.ワンタッチダウンロード機能

download.onclick = function(){
    var url = canvas.toDataURL('image/png');
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.href = url;
    a.download = 'context';
    a.click();
}

canvas.toDataURL('image/png');この方法はpng形式の画像が示すurlを返し、ユーザーがパネルのダウンロードボタンをクリックするとhtmlにaラベルを挿入し、a.downloadはキャンバスのコンテキストを指し、download属性はダウンロードされたハイパーリンクターゲットを規定する.
三.携帯電話に似合う画板1.metaタグの追加:ブラウザは最初にページを携帯電話側に表示するときにスケールするので、metaタグにmeta viewportプロパティを設定して、ブラウザにページをスケールしないように教えて、ページ幅=ユーザーデバイスの画面幅

2.移動端がマウスイベントを傍受する方法はpc端とは異なり、マウスがクリックしたときにontouchstart方法で傍受する:

canvas.ontouchstart = function(a){

            var x = a.touches[0].clientX;
            var y =a.touches[0].clientY;
            using = true;
            if (eraserEnabled) {
                context.clearRect(x, y, 20, 20);
            }
            else {
                lastPoint = {x: x, y: y}
            }
        }

マウスの移動がontouchmoveメソッドで傍受される場合:

 canvas.ontouchmove = function(a){

            var x = a.touches[0].clientX;
            var y = a.touches[0].clientY;
            if (!using) {return}
            if (eraserEnabled) {
                context.clearRect(x, y, 20, 20);
            }
            else{

                var newPoint = {"x": x, "y": y};
                drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                lastPoint = newPoint;

            }
        }

マウスが離れるとontouchendメソッドで傍受します.

 canvas.ontouchhend = function(a){

            using = false;
        }