キャンバスを使用して簡単な製図板をデザインする

以前、CanvasAPI の基本的な知識についていくつかお話しましたが、API の概要を見るだけではとても退屈なので、学習のモチベーションを高めるための小さなサンプルを作成しました。 CanvasAPI の知識と小さなサンプルの適用を組み合わせることで、キャンバスのこれらの プロパティとメソッドをより深く理解できるようになり、独自のインスピレーションや感覚を刺激してキャンバスの特殊効果を作成することもできます。 、雷峰と呼んでください、どういたしまして！

以下に紹介する小さな例は非常に単純な描画ツールです。まずその効果を見てみましょう。

まず効果を説明します。キャンバスといくつかのボタンがあり、ボタンは描画ボードのブラシの色を設定したり、描画ボードをクリアしたりできます。もちろん、ユニークな絵を描くには、右クリックして画像を保存してください。

では、これはどのように行われるのでしょうか?

最初に原理を説明してから、誰もが理解しやすいようにコードを投稿します。これはすでに実行済みなので、直接使用しないでください。

ここで使用される中心的なメソッドは、lineTo() と stroke() です。これが何を意味するか、つまりキャンバスに線を描くということを理解しているはずです。を押すと、マウスの位置にキャンバスの開始点を配置します。次に、マウスが移動すると、lineTo() を使用してパスを描画します。マウスを上げたときに、マウスのドラッグ操作をキャンセルするだけで済みます。はい、ドラッグの考え方はほぼ同じですが、マウスのドラッグ効果をまだ見ていない場合は、こちらをご覧ください

。 以下のボタンは制御する内容が異なるため、それぞれにエフェクトを追加するために switch メソッドを使用しました。キャンバスをクリアするメソッドは API には記載されていません。ここでは、clearRect() メソッドが使用されています。

clearRect(x,y,w,h) 指定された四角形内の指定されたピクセルをクリアします。

パラメータ: x、yはクリアする長方形の左上隅を表します。座標、w、hはクリアする長方形の幅と高さを表します

このパラメータを見ると、内容をクリアできることがわかります指定した領域の大きさに応じて、ローカル キャンバスまたはキャンバス全体を消去します。不要な部分だけを消去したい場合は、キャンバス全体を消去する必要があるため、この例ではキャンバス全体を消去します。正確な領域を設定できますが、ここでは詳しく説明しません。

一般的な原理はとても簡単です。ちなみに、体験するためにエフェクトアドレスを投稿しました:

css:

*{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

。

html:

 <canvas width="500" height="500" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
    </canvas>
    <p>
        <input type="button" value="红画笔" id="red">
        <input type="button" value="绿画笔" id="green">
        <input type="button" value="蓝画笔" id="blue">
        <input type="button" value="重置颜色" id="default">
        <input type="button" value="清除画布" id="clear">
    </p>

js:

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick = function(){                var ID = this.getAttribute('id');                switch(ID){                    case 'red':
                        ctx.strokeStyle = 'red';                        break;                    case 'green':
                        ctx.strokeStyle = 'green';                        break;                    case 'blue':
                        ctx.strokeStyle = 'blue';                        break;                    case 'default':
                        ctx.strokeStyle = 'black';                        break;                    case 'clear':
                        ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);                        break;    
                }    
            }    
        }
        draw();        function draw(){
            canvas.onmousedown = function(ev){                var ev = ev || event;
                ctx.beginPath();
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                document.onmousemove = function(ev){                    var ev = ev || event;
                    ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop);
                    ctx.stroke();    
                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;
                    ctx.closePath();
                }
                
            }
        }
        
        
        
    }

ああ、ここで説明するのを忘れていた詳細が1つありますパスの閉鎖を図面に追加する必要があること部分、つまり beginPath() と closePath() ですが、なぜですか?マウスを上げた後、次のスタイルを切り替えたり、キャンバスをクリアしたりするたびに、パスが閉じられていないと、その後の操作によって以前に描画されたものが汚されてしまうためです。たとえば、前の描画は赤で描画されました。現在の絵も元の絵も緑色になってしまったのに、もう一度絵を描くとまた最初の絵が出てくるのは望ましくないことです。覚えておくべきポイント！

効果のデモンストレーションについては、こちらをご覧ください:

キャンバス製図板の小さな例

今後、参考のためにさらに小さな例が徐々に提供される予定です。文章はあまり上手ではないので、期待しています。あなたはそれが嫌いではありません、そしてみんなが私にもっと注目してくれることを願っています、これが私の最大の動機です、ハハ！ 以上です、皆さんありがとうございます！

以上がキャンバスを使用して簡単な製図板をデザインするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。