碎形 | 程式專案 | 橘蘋學習平台

{"id":11568,"student_id":97,"content":"{\"html\":\"\u003ccanvas id=\\\"myCanvas\\\" width=\\\"1920\\\" height=\\\"1080\\\"\u003e\u003c/canvas\u003e\\r\\n\",\"css\":\"*{\\r\\n    text-align: center;\\r\\n    margin: 1em;\\r\\n}\\r\\n#myCanvas{\\r\\n    width: 800px;/*   600 *(1920/1080)   */\\r\\n    height:450px;\\r\\n    border: 1em solid #000;\\r\\n}\",\"js\":\"const firstLayer = 1;\\r\\nvar mirrorY = 1080*0.9;\\r\\nvar startX = 1920 * 0.2;\\r\\nvar endX = 1920 - 1920 * 0.2;\\r\\nvar startY = mirrorY;\\r\\nvar endY = mirrorY;\\r\\n\\r\\nvar c = document.getElementById(\\\"myCanvas\\\");\\r\\nvar ctx = c.getContext(\\\"2d\\\");\\r\\nctx.beginPath();\\r\\nctx.moveTo(startX,startY);\\r\\n\\r\\nfunction getMirrorY(y,mirrorY){\\r\\n    return startY - (y- startY);\\r\\n}\\r\\n\\r\\nfunction moveAndDrawLine(pos,isDrawMirror){\\r\\n    if(isDrawMirror){\\r\\n        ctx.lineTo(pos.x, getMirrorY(pos.y , mirrorY) );\\r\\n    }else{\\r\\n        ctx.lineTo(pos.x,            pos.y );\\r\\n    }\\r\\n    ctx.stroke();\\r\\n}\\r\\n\\r\\n\\r\\nfunction draw(x1,y1,x2,y2,layer,finalLayer,sideShapeN){\\r\\n    if(layer \u003e finalLayer)return;\\r\\n\\r\\n    var len = Math.sqrt( (x2-x1)**2 + (y2-y1)**2 )/3;\\r\\n    var initAngle = Math.atan2(y2-y1,x2-x1);;\\r\\n    var tempAngle = Math.PI + initAngle;\\r\\n    var angleStop = Math.PI*2/sideShapeN;\\r\\n\\r\\n    var directionSaves = [];\\r\\n    directionSaves.push( initAngle );\\r\\n    for(var i=0 ; i\u003csideShapeN-1 ; i++){\\r\\n        tempAngle -= angleStop;\\r\\n        directionSaves.push(tempAngle);\\r\\n    }\\r\\n    directionSaves.push( initAngle );\\r\\n\\r\\n    var posSaves = [{x:x1,y:y1}];\\r\\n    directionSaves.forEach(function( direction ){\\r\\n        var lastPos = posSaves[posSaves.length-1];\\r\\n        var newPos = {\\r\\n            x: lastPos.x + len * Math.cos(direction),\\r\\n            y: lastPos.y + len * Math.sin(direction)\\r\\n        }\\r\\n        posSaves.push(newPos);\\r\\n        draw(lastPos.x,lastPos.y,newPos.x,newPos.y,layer+1,finalLayer,sideShapeN);\\r\\n        moveAndDrawLine(newPos,true);\\r\\n    });\\r\\n\\r\\n}\\r\\n\\r\\nvar sideShapeN = prompt(\\\"你想要看幾邊形\\\");\\r\\nvar finalLayer = prompt(\\\"要畫幾層 (建議五層內)\\\");\\r\\ndraw(startX,startY,endX,endY,firstLayer,finalLayer,sideShapeN);\\r\\n\\r\\n\\r\\n\"}","created_at":"2017-09-18T01:00:45.769+08:00","updated_at":"2019-11-03T01:06:50.198+08:00","name":"碎形","language":"web","screenshot":{"url":null},"parent_id":11566,"plugin":null,"description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":277,"hashid":"d5msvq9d","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}