canvasメモ(1)

1.canvas自体はwidthとheightが付いていて、ラベル属性styleに書いてあるのは外とは違います.canvasパス操作を行う場合は、前のパス(obj.beginPath())をクリアする必要があります.そうしないと、前のパスは後の影響を受けます.3. obj.beginPath()とobj.2つは関係ないbeginPath()前のパスをクリアします.obj.closePath()現在のパス4を閉じる.canvas線引き操作:moveTo()、lineTo()、beginPath()、closePath()、stroke()、fill()5.canvas長方形描画操作:rect()、strokeRect()、fillRect()、clearRect()6.canvasは適応してwindowを使うことができます.onresize7. canvasの線が広がるときは内側にも外側にも広がる.canvasはグラフィックを保存しないので、グラフィックを描くと修正できません.修正するには、再描画を削除するしかありません.canvasが描いた図形にはイベントがなく、canvasオブジェクト自体にイベントがあります.
canvasのグラフィックを右に移動するインスタンス:

    
    
    
    
    
    
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let left=100;
            let gd = c1.getContext('2d');
            requestAnimationFrame(next);

            function next(){
                gd.clearRect(0,0,c1.width,c1.height);
                left+=5;
                gd.strokeRect(left,100,200,200);

                requestAnimationFrame(next);
            }
        }
    


    

このコードはcanvasに右に移動する矩形があります.requestAnimationFrame関数は、アニメーションフレームを要求します.
canvasでマウスを移動して矩形の変色インスタンスを削除します.
やはり上のcanvasで、jsコードは以下の通りです.

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');  
            gd.strokeRect(100,100,200,200);
            c1.onmousemove=function(ev){
                let l=100,r=l+200,t=100,b=t+200;
                let x=ev.offsetX,y=ev.offsetY;
                //let x=ev.clientX-c1.offsetLeft,y=ev.clientY-c1.offsetTop;
                //       x，y       
                gd.clearRect(0,0,c1.width,c1.height);
                if(x>=l&&x<=r&&y>=t&&y<=b){
                    gd.strokeStyle='red';
                }else{
                    gd.strokeStyle='black';
                }
                gd.strokeRect(100,100,200,200);
            }
        }

9.canvas円を描くarc(cx,cy,r,startAng,endAng,false)、cx,cyは円心座標、rは半径、startAng,endAngは開始角度と終了角度(弧度制)、最後のパラメータfalseは反時計回りを表す.
canvasでマウスを移動して円形の変色インスタンスを削除します.
原理:マウスが円内にあるかどうかをどのように判断しますか?マウスから中心までの距離が半径より大きいかどうかを判断すれば、円内にあるかどうかを検出できます
やはり上のcanvasで、jsコードは以下の通りです.

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let cx=200,cy=200,r=150;

            function d2a(n){//     
                return n*Math.PI/180;
            }
            function a2d(n){//     
                return n*180/Math.PI;
            }
            
            gd.arc(cx,cy,r,d2a(0),d2a(360),false);
            gd.stroke();
     
            c1.onmousemove=function(ev){
                let x=ev.offsetX,y=ev.offsetY;//        ，  
                let dis=Math.sqrt(Math.pow(x-cx,2)+Math.pow(y-cy,2));//        
                gd.clearRect(0,0,c1.width,c1.height);

                if(dis<=r){//              ，     
                    gd.strokeStyle='red';
                }
                else{//     
                    gd.strokeStyle='black';
                }
                gd.beginPath();
                gd.arc(cx,cy,r,d2a(0),d2a(360),false);
                gd.stroke();
            }