canvasで折り紙をしてみる。

function startSim(){
    var canvas = document.getElementById("sim");
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.lineWidth = 1;
    ctx.moveTo(20, 20);
    ctx.lineTo(20, 100);
    ctx.lineTo(100, 100);
    ctx.lineTo(100, 20);
    ctx.closePath();
    ctx.stroke();
}
startSim();

canvas.addEventListener("mousedown",function(e){
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
});

クリックした箇所まで描画四角形が折り返されるサンプルを作成する。とりあえず今日はここまで。

毎日更新を目標にするけど、こんな中途半端な記事ではだめでしょうかｗやらないよりましかな。

言われますまい

WEBエンジニアのかいはつにっし

canvasで折り紙をしてみる。