canvas stroke 描繪線條

步驟 建立路徑 beginPath() 設定線條寬度(可省) lineWidth=”5″ 設定顏色(可省) strokeStyle=”green” 開始 moveTo(0, 100) 結束 lineTo(300, 100) 畫出線來 stoke() 範例 canvas#canvas(width=”300″, height=”150″) const ctx=canvas.getContext(“2d”); canvas.width=window.innerWidth; canvas.height=window.innerHeight; //draw a line ctx.beginPath();//start to draw a line ctx.lineWidth=”5″;//set line width ctx.strokeStyle=”green”;//set color ctx.moveTo(0, 100);//start point ctx.lineTo(300, 100);//end point ctx.stroke();//draw it Display

const

const 的特性 不可以被修改 如果有block,在block裡面可以被改,但是回到外面會變回初始值 cant’t be updated & defined const width=100; width=200; console.log(width);//100 //不可被修改 block scope let points=50; const winner=false; if(points>40) { const winner=true; console.log(winner);//true //只有在block內部,才能夠被更改 } console.log(winner);//false //在外部則不會被更改,呈現初始值

let

block block是指大括弧 {} 裡面。 像是if述句,for述句,function裡面都是block global scope→任何地方都能被改 block socpe→在if述句,for述句,function裡面可以被改(大括號包起來的地方),在外面還是回到初始值 function scope→只有在function裡面才可以被改 let 的特性 可以被修改 如果有block,在block裡面可以被改,但是回到外面會變回初始值 updated & defined let width=100; width=200; console.log(width);//200 //可被修改 block scope let points=50; let winner=false; if(points>40) { let winner=true; console.log(winner);//true //只有在block內部,才能夠被更改 } console.log(winner);//false //在外部則不會被更改,呈現初始值

var

var的特性 可以被重新定義(redefined) 可以被更新(updated) 若存在於函式內(function),就是函式變數(function scope),只能在函式內部被存取、修改。 若沒再函式內,會變成全域變數(global scope),不論在函式內或是外面都可以被存取,修改。 redefined and updated var width=100; console.log(width);//100 width=200; console.log(width);//200 //可被修改 function scope function setWidth() { var width = 100; console.log(width);//100 } setWidth(); console.log(width);//nothing //width只能在setWidth裡面作用 global scope var width; function setWidth() { width = 100; console.log(width);//100 } setWidth(); console.log(width);//100 //width 在任何地方都能被修改或存取 let points = 50; var winner = false; if(points […]

建立canvas

説明 canvas 是一種強大的繪圖功能。 透過 HTML 與 JS 的使用 (主要是 JS ) 可以在瀏覽器上繪製任何向量圖型。 跟 SVG 有點像,但用途更多元。 步驟解説 設定 HTML 與 CSS canvas#canvas(width=”800″, height=”800″) //呼叫canvas,然後給一個id,設定畫布長寬 //這邊設定的長800寬800會成為指定向量元素的絶對定位參考 html, body margin: 0 overflow: hidden //讓邊界不會多出來 定義 context 與長寬 context 是作畫的畫布。 圖形都要畫在 context 上面。 //定義context const ctx=canvas.getContext(“2d”);//平面圖型用2d //定義長寬 canvas.width=window.innerWidth; canvas.height=window.innerHeight;//設定畫布=全螢幕 開始作畫(添加圖形元素) 先設定顏色 再設定圖形 //填色 ctx.fillStyle=”#FFA500″; //畫正方形 ctx.fillRect(400, 400, 100, 100); […]