ホームページ  >  記事  >  ウェブフロントエンド  >  キャンバスを使って便利な落書きボードを作成する方法

キャンバスを使って便利な落書きボードを作成する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-12 14:50:172576ブラウズ

今回は、キャンバスを使って便利な落書きボードを作る方法を紹介します。キャンバスを使って便利な落書きボードを作るときの注意点は何ですか?実際の事例を見てみましょう。キャンバス内のカーソル座標を取得します

座標を取得するコードは非常に簡単です:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
        *{margin: 0;padding: 0}    </style></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }        //鼠标移动
        function onMouseMove(e) {            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;
        }
        canvas.width = 600;
        canvas.height = 300; 
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false); //<==兼容PC
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);//<===兼容安卓或其他系统
    </script></body></html>

注: マウスとタッチ スクリーンのイベントは異なるため、マウスはキャンバス上でホバーするだけで取得できますが、タッチ スクリーンを押す必要があり、返される Event オブジェクトも異なります。

2. 描画するかどうかの制御

描画するかどうかの制御は、実際には非常に簡単です。つまり、自己定義変数の値を判断して制御します

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{margin: 0;padding: 0}    </style></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        var drawing = false;//<===是否绘制
        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }         //鼠标按下
         function onMouseDown(e) {
                drawing = true; 
            }            //鼠标弹起
            function onMouseUp(e) {                if (!drawing) { return; }
                drawing = false; 
            }        //鼠标移动
        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;
        }
        canvas.width = 600;
        canvas.height = 300; 
        canvas.addEventListener(&#39;mousedown&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;mouseup&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mouseout&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false);
        canvas.addEventListener(&#39;touchstart&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;touchend&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);    </script></body></html>
3. 線描画

のコードです。線画もとても簡単です

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = width; 
    context.stroke();
    context.closePath();
}
....

線画のコードをイベントに組み込みます:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        var drawing = false;//<===是否绘制
        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }        //线条绘制
        function drawLine(x0, y0, x1, y1, color, width) {
            context.beginPath();
            context.moveTo(x0, y0);
            context.lineTo(x1, y1);
            context.strokeStyle = color;
            context.lineWidth = width; 
            context.stroke();
            context.closePath();
        }        //鼠标按下
        function onMouseDown(e) {
            drawing = true;            //记录按下点
            var p = getPoint(e);
            current.x = p.x;
            current.y = p.y;
        }        //鼠标弹起
        function onMouseUp(e) {            if (!drawing) { return; }
            drawing = false;            //绘制结束点
            var p = getPoint(e);
            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
        }        //鼠标移动
        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML = p.x + "-" + p.y;            //移动绘制
            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
            current.x = p.x;
            current.y = p.y;
        }
        canvas.width = 600;
        canvas.height = 300;
        canvas.addEventListener(&#39;mousedown&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;mouseup&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mouseout&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false);
        canvas.addEventListener(&#39;touchstart&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;touchend&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);    </script></body></html>

4. 線画の最適化

描いた線の幅が比較的細い場合は大丈夫ですが、太くなると問題を書きます:

この時点では、描画を少し変更するだけです。コードだけです

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = width; 
    //-----加入-----
    context.lineCap = "round";
    context.lineJoin = "round";    //-----加入-----
    context.stroke();
    context.closePath();
}
....

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、に関する他の関連記事に注目してください。 php中国語のウェブサイトです!

関連記事:

s-xlsxを使用してセルを結合する方法


js-xlsxを使用してxlsxファイルを非同期的に読み取る方法)

以上がキャンバスを使って便利な落書きボードを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。