2_rect | 程式專案 | 橘蘋學習平台

{"id":262708,"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 drawRect(color, x, y, w, h) {\\r\\n            ctx.fillStyle = color;\\r\\n            ctx.fillRect(x, y, w, h);\\r\\n        }\\r\\n\\r\\n        let canvas = document.querySelector('canvas'); // 取的畫布元件並存到 canvas 變數中\\r\\n        let ctx = canvas.getContext('2d'); // 取得控制畫布的畫筆\\r\\n        let colors = [\\\"black\\\", \\\"white\\\"]\\r\\n\\r\\n        // ctx.fillStyle = 'red'; // 填充色設為紅色\\r\\n        // ctx.fillRect(100, 50, 200, 300); // 繪製一個矩形，左上角座標設為 100, 50 並寬高設為 200, 300\\r\\n        for (let i=0; i\u003c8; i++) {\\r\\n            for (let j=0; j\u003c8; j++) {\\r\\n                drawRect(colors[(j+i)%2], 50*j, 50*i, 50, 50);\\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:45.151+08:00","updated_at":"2021-06-17T22:53:52.682+08:00","name":"2_rect","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":36,"hashid":"4y3sgwwy4","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}