guaguaka

by fangsmile

HTML

<h1>刮刮卡来了，试试运气？</h1>
<div id="card">
  <canvas id="canvasOne" width="500" height="300"></canvas>
</div>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            width: 100vw;
            height: 100vh;
        }
        
        body {
            min-height: 100%;
            padding: 1vw;
            text-align: center;
        }
        
        #card {
            width: 540px;
            height: 200px;
            margin: 0 auto;
            background:...

JavaScript

window.onload= eventWindowLoaded();

       
        function eventWindowLoaded() {
            canvasApp();
        }

        function canvasApp() {
            var canvas = document.getElementById('canvasOne');
            var ctx = canvas.getContext('2d');
            var card = document.getElementById('card');
            var width = card.offsetWidth;
            var height = card.offsetHeight;
            canvas.width = width;
            canvas.height = height;

            var isDrawing;
            var lastPoint;
            var brush = new Image();

            brush.src =...