캔버스 스크래치 게임

사고방식

에 나타난 문제점 요약

코드

사고의 방향

1. 도면층을 긁은 후 무작위 배경도를 표시하고 마우스 들어올리기 이동 내려놓기 이벤트를 설계한다.신구 픽셀이 합쳐질 때 지워져요.

ctx.globalCompositeOperation = 'destination-out'

3. 빠르게 이동하면 단점이 생길 수 있으니 양쪽 떨어진 곳을 선으로 연결한다. 4.getImageData라는 방법을 이용하여 안에 있는 데이터를 얻을 수 있다. 데이터에 모든 화소점의 rgba가 포함되어 있어 a라는 속성 값을 판단하고 a가 0인 값의 개수가 일정량에 도달할 때 회색 도층을 모두 제거한다.

문제점 요약

1. 단점을 빠르게 이동하는 문제를 해결할 때 폐쇄 경로를 잘 써야 한다. 이것은 원을 먼저 그릴지 선을 먼저 그릴지 순서와 무관하다.캔버스가 가운데에 있는 방법에 대해 캔버스는 블록급 요소가 아닙니다. 가운데에 있는 것을 원한다면 부모급을 추가할 수 있습니다. 텍스트-align:center나 Margin:0 auto를 직접 사용할 수 있습니다. 그러나 이것은 넓이를 설정해야 합니다.addeventListener의 세 번째 매개 변수,false는 거품,true는 포획

코드

 <style>
        * {
            margin: 0;
            padding: 0;
        }

       div{
            /* width: 302px;
            height: 302px; 
            margin: 0 auto; */
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
            background-size: 100% 100%;

        }
    </style>
</head>

<body>
    <div>
        <canvas width="300" height="300" id="myCanvas"></canvas>
    </div>
    <script>
        var myCanvas = document.getElementById('myCanvas');
        //  ( jq $， getContext dom )
        var ctx = myCanvas.getContext('2d');
        var lastX, lastY, nowX, nowY;

        init();

        function init() {
            ctx.fillStyle = '#ccc';
            ctx.fillRect(0, 0, 300, 300);

            var oImg = new Image();
            var r = Math.random();
            oImg.src = r < 0.5 ? './img/duidui01.jpg' : './img/duidui02.jpg';
            oImg.onload = function () {
                myCanvas.style.backgroundImage = 'url(' + oImg.src + ')';
                ctx.globalCompositeOperation = 'destination-out';
                document.addEventListener('mousedown', downFun, false);
            }

            function downFun(e) {
                var lastX = e.clientX - myCanvas.offsetLeft;
                var lastY = e.clientY - myCanvas.offsetTop;
                document.addEventListener('mousemove', moveFun, false);
                document.addEventListener('mouseup', upFun, false);
            }

            function moveFun(e) {
                var nowX = e.clientX - myCanvas.offsetLeft;
                var nowY = e.clientY - myCanvas.offsetTop;
                //  
                ctx.beginPath();
                ctx.fillStyle = 'red';
                ctx.arc(nowX, nowY, 20, 0, Math.PI * 2, 0);
                ctx.fill();

                ctx.beginPath();
                ctx.lineWidth = '40';
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(nowX, nowY);
                ctx.stroke();

                lastX = nowX;
                lastY = nowY;
            }

            function upFun() {
                document.removeEventListener('mousemove', moveFun, false);
                clearAll();
            }

            //  0.8 
            function clearAll() {
                var d = ctx.getImageData(0, 0, 300, 300);
                var len = d.data.length;
                var num = 0;
                for (i = 0; i < len; i += 4) {
                    if (d.data[i] == 0) {
                        num++;
                    }
                }

                if (num > 300 * 300 * 0.8) {
                    ctx.clearRect(0, 0, 300, 300);
                }
            }
        }

    </script>
</body>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

캔버스 스크래치 게임