3_polygon | 程式專案 | 橘蘋學習平台

{"id":262709,"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        let canvas = document.querySelector('canvas'); // 取的畫布元件並存到 canvas 變數中\\r\\n        let ctx = canvas.getContext('2d'); // 取得控制畫布的畫筆\\r\\n        \\r\\n        // 繪製一條線\\r\\n        // ctx.moveTo(30, 30); // 下筆在 30, 30 位置\\r\\n        // ctx.lineTo(100, 30); // 從下筆 30, 30 開始畫一條線至 100, 30 位置\\r\\n        // ctx.stroke(); // 路徑上色\\r\\n\\r\\n        // 繪製三角形\\r\\n        ctx.strokeStyle = 'black'; // 線條顏色\\r\\n        ctx.fillStyle = 'orange'; // 填充顏色\\r\\n        ctx.beginPath();\\r\\n        ctx.moveTo(200, 50); // 下筆在座標 100, 100 位置\\r\\n        ctx.lineTo(250, 150); // 從下筆 100, 100 地方畫一條線至 300, 200 位置\\r\\n        ctx.lineTo(350, 150); // 畫筆從 300, 200 地方畫一條線至 200, 300 位置\\r\\n        ctx.lineTo(250, 200);\\r\\n        ctx.lineTo(300, 300);\\r\\n        ctx.lineTo(200, 250);\\r\\n        ctx.lineTo(100, 300);\\r\\n        ctx.lineTo(150, 200);\\r\\n        ctx.lineTo(50, 150);\\r\\n        ctx.lineTo(150, 150);\\r\\n        ctx.closePath(); // 畫筆從 200, 300 地方畫一條線道 100, 100 位置，封閉路徑會自動將線條連結回至起點\\r\\n        ctx.fill(); // 範圍內填充顏色(red)\\r\\n        ctx.stroke(); // 路徑上色(black)\\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:15.750+08:00","updated_at":"2021-06-17T22:54:22.656+08:00","name":"3_polygon","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":40,"hashid":"yeysvrrde","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}