JSFiddle - React, Tailwind, and code Playground

by 蔡 育曄

HTML

<body>
    <script type="text/javascript" src="src/index.js"></script>
    <script type="text/javascript">
        // 1、生成背景
        // 2、title生成
        // 3、用js動態生成canvas標簽
        // 4、js方式動態生成h4標簽和canvas標簽
        new canvasLock({chooseType:3}).init();
    </script>
</body>

CSS

body{
  text-align: center;
  background: #305066;
}
h4{
  color: #22C3AA;
}

JavaScript

(function(){
        /**
         * 實作畫圓和劃線：
         * 1、添加事件touchstart、touchmove、touchend
         * 2、touchstart判斷是否點擊的位置處于圓內getPosition，處于則初始化
         * lastpoint、restPoint
         * 3、touchmove做的就是：畫圓drawPoint和畫線drawLine
         *
         * 實作自影片圓的效果
         * 1、檢測手勢移動的位置是否處于圓內
         * 2、圓內的話則畫圓 drawPoint
         * 3、已經畫過實心圓的圓，無需重復檢測
         *
         * 實作解鎖成功：
         * 1、檢測路徑是否是對的
         * 2、如果是對的就重置，圓圈變綠
         * 3、不對也重置，圓圈變紅
         * 4、重置
         */

        window.canvasLock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = obj.chooseType;
        };

        // js方式動態生成dom
        canvasLock.prototype.initDom = function(){
            var wrap = document.createElement('div');
            var str = '<h4 id="title" >繪制解鎖圖案</h4>';
            wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');


            var canvas = document.createElement('canvas');
            canvas.setAttribute('id','canvas');
            canvas.style.cssText = 'background-color: #305066;display: inline-block;margin-top: 15px;';

            wrap.innerHTML = str;
            wrap.appendChild(canvas);

            var width = this.width || 300;
            var height = this.height || 300;
            
            document.body.appendChild(wrap);

            // 高清屏鎖放
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";

            canvas.width = width;
            canvas.height = height;

        }
        canvasLock.prototype.drawCle = function(x, y) { // 初始化解鎖密碼面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        canvasLock.prototype.createCircle = function() {// 創建解鎖點的坐標，根據canvas的大小來平均分配半徑

            var n =...