4_drawing_tool | 程式專案 | 橘蘋學習平台

{"id":262710,"student_id":3760,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml lang=\\\"zh-Hant-TW\\\"\u003e\\r\\n\\r\\n\u003chead\u003e\\r\\n    \u003ctitle\u003e塗鴉板\u003c/title\u003e\\r\\n    \u003cstyle\u003e\\r\\n        body {\\r\\n            padding: 30px; /* 內距 */\\r\\n        }\\r\\n        h1 {\\r\\n            text-align: center; /* 文字置中 */\\r\\n        }\\r\\n        canvas {\\r\\n            border: 3px solid #aaa; /* 邊框樣式 */\\r\\n            border-radius: 25px; /* 圓角 25px 能讓元件變成圓形，等同於寫 20px */\\r\\n            margin: auto;\\r\\n            display: block;\\r\\n        }\\r\\n        .colors-picker {\\r\\n            display: flex; /* 彈性盒子佈局 */\\r\\n            justify-content: center; /* 內容物水平置中 */\\r\\n        }\\r\\n        .circle {\\r\\n            width: 30px;\\r\\n            height: 30px;\\r\\n            margin: 10px; /* 向上下左右推擠 10px */\\r\\n            border: 3px solid #aaa; /* 邊框樣式 */\\r\\n            border-radius: 50%; /* 1.圓角 50% 能讓元件變成圓形，等同於寫 20px */\\r\\n            cursor: pointer; /* 2.滑鼠移上去時，鼠標切換成手指樣式 */\\r\\n        }\\r\\n        .circle:hover {\\r\\n            opacity: 0.7; /* :hover 滑鼠碰到時透明度變成 0.7 */\\r\\n        }\\r\\n        .circle:active {\\r\\n            opacity: 0.4; /* :active 滑鼠按下觸發時透明度變成 0.4 */\\r\\n        }\\r\\n        .bg-red {\\r\\n            background-color: red;\\r\\n        }\\r\\n        .bg-green {\\r\\n            background-color: green;\\r\\n        }\\r\\n        .bg-blue {\\r\\n            background-color: blue;\\r\\n        }\\r\\n        .bg-black {\\r\\n            background-color: black;\\r\\n        }\\r\\n        .bg-white {\\r\\n            background-color: white;\\r\\n        }\\r\\n    \u003c/style\u003e\\r\\n\u003c/head\u003e\\r\\n\\r\\n\u003cbody\u003e\\r\\n\\r\\n    \u003ch1\u003e我的塗鴉牆\u003c/h1\u003e\\r\\n\\r\\n    \u003ccanvas width=\\\"600\\\" height=\\\"400\\\" onmousedown=\\\"mouseDown();\\\" onmouseup=\\\"mouseUp();\\\" onmousemove=\\\"monuseMove(event);\\\"\u003e\u003c/canvas\u003e\\r\\n\\r\\n    \u003cdiv class=\\\"colors-picker\\\"\u003e\\r\\n        \u003cdiv class=\\\"circle bg-red\\\" onclick=\\\"setColor('red');\\\"\u003e\u003c/div\u003e\\r\\n        \u003cdiv class=\\\"circle bg-green\\\" onclick=\\\"setColor('green');\\\"\u003e\u003c/div\u003e\\r\\n        \u003cdiv class=\\\"circle bg-blue\\\" onclick=\\\"setColor('blue');\\\"\u003e\u003c/div\u003e\\r\\n        \u003cdiv class=\\\"circle bg-black\\\" onclick=\\\"setColor('black');\\\"\u003e\u003c/div\u003e\\r\\n        \u003cdiv class=\\\"circle bg-white\\\" onclick=\\\"setColor('white');\\\"\u003e\u003c/div\u003e\\r\\n    \u003c/div\u003e\\r\\n\\r\\n    \u003cscript\u003e\\r\\n        let canvasDOM = document.querySelector('canvas'); //取得畫布元件\\r\\n        let ctx = canvasDOM.getContext('2d'); //4. 畫布的畫筆\\r\\n        let active = false; //紀錄畫筆是否被按下\\r\\n        let size = 15;\\r\\n\\r\\n        // ctx.lineWidth = 20;\\r\\n\\r\\n        // 滑鼠在畫布上按下，將 active 設為 true\\r\\n        function mouseDown () {\\r\\n            active = true;\\r\\n        }\\r\\n\\r\\n        // 滑鼠在畫布上放開，將 active 設為 false\\r\\n        function mouseUp () {\\r\\n            active = false;\\r\\n        }\\r\\n\\r\\n        // 滑鼠在畫布上移動\\r\\n        function monuseMove(event) {\\r\\n            if (active) { // 滑鼠是否按下\\r\\n\\r\\n                // event 作為參數傳入函式帶有相關事件的資訊，例如 offsetX, offsetY 就可以取的相對畫布的座標\\r\\n                // ctx.fillRect(event.offsetX, event.offsetY, size, size);\\r\\n                ctx.beginPath();\\r\\n                ctx.arc(event.offsetX, event.offsetY, size, 0, 2*Math.PI);\\r\\n                ctx.fill();\\r\\n            }\\r\\n        }\\r\\n\\r\\n        // 設定畫筆顏色\\r\\n        function setColor (color) {\\r\\n            ctx.fillStyle = color;\\r\\n            if (color === \\\"white\\\")\\r\\n                size *= 6;\\r\\n            else\\r\\n                size = 15;\\r\\n        }\\r\\n    \u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\\r\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"// 創造一個函式指令 hello：\\nfunction hello () {\\n    // 讓網頁跳出文字訊息：\\n    alert('叩叮：\\\\n嗨你好～ 讓我們一起加油寫出漂漂亮亮的網頁唄！');\\n}\"}","created_at":"2021-06-17T22:54:46.494+08:00","updated_at":"2021-06-17T22:54:57.620+08:00","name":"4_drawing_tool","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/262710/e37d5612a3d79167b960321d3009ea0a.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":34,"hashid":"zpesj55vd","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}