1_circle | 程式專案 | 橘蘋學習平台

{"id":262707,"student_id":3760,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml lang=\\\"en\\\"\u003e\\r\\n\u003chead\u003e\\r\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\r\\n    \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\"\u003e\\r\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\r\\n    \u003ctitle\u003e神奇ㄝ畫布 - 畫笑臉😊\u003c/title\u003e\\r\\n\\r\\n    \u003cstyle\u003e\\r\\n        /* 為了讓我們看清楚畫布元件，加上 1 像素寬(px)實心(solid)黑色(black)邊框(border) */\\r\\n        canvas {\\r\\n            border: 1px solid black;\\r\\n        }\\r\\n    \u003c/style\u003e\\r\\n\u003c/head\u003e\\r\\n\\r\\n\u003cbody\u003e\\r\\n    \\r\\n    \u003c!-- canvas 是畫布元件，可以使用 width, height 屬性來設定畫布尺寸 --\u003e\\r\\n    \u003ccanvas width=\\\"400\\\" height=\\\"400\\\"\u003e\u003c/canvas\u003e\\r\\n\\r\\n    \u003cscript\u003e\\r\\n        function draw(x, y, r, startDeg, endDeg) {\\r\\n            ctx.beginPath();\\r\\n            ctx.arc(x, y, r, startDeg, endDeg);\\r\\n            ctx.stroke();\\r\\n        }\\r\\n\\r\\n        let canvas = document.querySelector('canvas'); // 取的畫布元件並存到 canvas 變數中\\r\\n        let ctx = canvas.getContext('2d'); // 取得控制畫布的畫筆\\r\\n\\r\\n        // ctx.beginPath(); // 下筆\\r\\n        // ctx.arc(200, 200, 100, 0, 2*Math.PI); //繪製一個圓形圓心 XY 座標位於 200, 200 的位置半徑 100 並從 0 度繪製到 360 度\\r\\n        // ctx.stroke(); // 線條呈現\\r\\n        draw(200, 200, 100, 0, 2*Math.PI);\\r\\n        draw(120, 200, 15, 0, 2*Math.PI)\\r\\n        draw(280, 200, 15, 0, 2*Math.PI)\\r\\n        draw(200, 220, 70, 0, Math.PI)\\r\\n        draw(170, 160, 15, Math.PI, 2*Math.PI)\\r\\n        draw(230, 160, 15, Math.PI, 2*Math.PI)\\r\\n\\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:53:15.212+08:00","updated_at":"2021-06-17T22:53:28.229+08:00","name":"1_circle","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":41,"hashid":"p93skmm6g","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}