Today I Learned #22

4417 ワード
TIL テキストリンク

paintJS図形描画機能の実現


これまで行われてきたpaintJSではcanvasが実現され,各色に対応したbuttonとブラシ厚さのrangeが実現されているが,canvas自体の描画機能やbuttonとrangeを介して値を伝達する機能はまだ実現されていない.そこで、まずcanvasで絵を描く機能を実現しましょう.

宣言と設定


MDNコンテキストドキュメントを参照して、canvasのコンテキストを設定します.
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#2c2c2c";
ctx.lineWidth = 2.5;
canvas.width = 500 ;
canvas.height = 500;
また、色はstrokeStyleにより決定され、ペンの厚さを示すlineWidthの初期値は2.5と宣言され、html <canvas>の大きさと同じ大きさにするため、canvas.widthとcanvas.heightの値はそれぞれ500と指定されている.

onMouseMove

startPaintingおよびstopPainting関数により、letの値が宣言されたときはpainting、終了時はtrueであり、対応するfalseの値に従って関数が実行される.
function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    if(!painting) {
        ctx.beginPath();
        ctx.moveTo(x,y);
    } else {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}
まず、paintingが発生した場合、"mousemove"の値がpaintingである場合、falseのpathは、マウスが存在するx,yから始まると宣言される.この過程で、ユーザのマウスがキャンバス上を移動するとmousedown(クリック)が発生し、contextはpaintingに変換され、前のx,yで生成されたtrueから、pathはbeginPath()で移動するx,yに接続される.lineTo(x,y)関数により、stroke()が生成されるたびに、pathは"mousemove"の色とstrokeStyleの値の厚さに着色される.

実行結果


ORA-20000:ORU-10027:Buffer Overflow,Limit Of 100000 Bytes浅析
[PYTHON] 7. JSON (Javascript Object Notation)