10521 數位整合傳播 Week05學習日誌
任課老師：王曉璿
學 生：周家禾
學
號：ADT106111
一、課程摘要
1.HTML之Canvas繪圖設計及相關指令查詢
2.設計按鈕顯示/隱藏圖片及融入webduino上拉按鈕設計
3.Webduino光敏電阻練習及設計
二、課程網路資源
HTML、CSS、JS統整教學及範例學習工具網站w3school https://www.w3schools.com/default.asp
Webduino官方學習手冊https://tutorials.webduino.io/zh-tw/docs/basic/index.html
JS學習相關網址
Codecademy線上基礎教材，適合剛接觸的人學習(需會員，部分完整課程須購買解鎖) https://www.codecademy.com/learn/learn-javascript
MDN Javascript Guide解釋許多JS的概念，並有開發者維護的開發指南 https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery常用JavaScript函式庫，可協助更簡單的實現網頁上的資料互動及事件處理方法，同時簡化許多AJAX操作方法(關於AJAX方法可參考 https://www.w3schools.com/jquery/jquery_ajax_intro.asp）https://jquery.com/
CodePen可用於練習寫程式，同時亦有需多他人的作品分享可用於學習與參考 https://codepen.io/
JS
Fiddle可用於練習程式 https://jsfiddle.net/
三、課程重要指令語法摘要
一些Canvas基本的東西註解
W3School關於Canvas之說明
https://www.w3schools.com/html/html5_canvas.asp
https://www.w3schools.com/graphics/canvas_intro.asp
HTML部分
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid
#d3d3d3;"> //id、寬、高、型(外框線條:粗細、實線、顏色)
Your browser does not support the HTML5 canvas tag.</canvas> //Canvas無法顯示石顯示的內容文字
//主要是透過Javascript來進行繪圖設計
Script部分
var c = document.getElementById("myCanvas"); //將該id之Canvas宣告為變數c
var ctx = c.getContext("2d"); //宣告ctx變數為2d繪圖物件(內建內容)
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.beginPath(); //將以下所繪製的圖形為一起
//畫線條
ctx.moveTo(0,0); //將該點移至(設定起始點)
ctx.lineTo(200,100); //將該點移至(目的點)
ctx.lineTo(20,100); //可自由增加數點(實線會依順序將點連起)
//畫圓
ctx.arc(95,50,40,0,2*Math.PI); //圓
//(圓心X軸位置,圓心Y軸位置,半徑,不確定(有點類似完整度的東東),角度(注意是用PI)
//寫字
ctx.font = "30px Arial"; //字體、大小
ctx.fillText("Hello World",10,50); //實心字(內容 x,y)
ctx.strokeText("Hello World",10,50); //空心字
ctx.stroke(); //將點之間以實線連起
----------------
style.display=”block/none”
----------------
Webduino光敏電阻相關
光敏電阻腳位為 A0
光敏電阻偵測值介於0-1之間(兩色可用0.5作為分界點)
四、學習心得
這週在HTML的部分學習了Canvas繪圖，雖然目前只有學到基礎的產生線、圓、文字或上色等，但Canvas在網頁的設計上能有很大的應用跟變化，例如曾經看過一個網頁上刮刮樂設計就是使用Canvas為主製作出來的。另外這周Webduino的部分使用了光敏電阻，也是能衍伸應用於生活中的功能設計