canvas stroke 描繪線條

步驟

  1. 建立路徑
    beginPath()
  2. 設定線條寬度(可省)
    lineWidth=”5″
  3. 設定顏色(可省)
    strokeStyle=”green”
  4. 開始
    moveTo(0, 100)
  5. 結束
    lineTo(300, 100)
  6. 畫出線來
    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 的特性

  1. 不可以被修改(再指定)
  2. 如果有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
//在外部則不會被更改,呈現初始值

By Value or By Reference

當資料類型為By Value時〔Number, String, Boolean〕
以const宣告的變數是不能被再指定的(即等於不能被改)

//錯誤示例
const name='Ian';
name='Chen'; //←ERROR!!

但若資料類型是By Reference時〔Object, Array〕,
以const宣告後可以用push, object.item=xxx等方式修改其值。
但一樣不能進行再指定的動作

//正確示例
const fruits=['apple', 'banana', 'orange'];
console.log(fruits); //['apple', 'banana', 'orange']

fruits.push('grape');
console.log(fruits); //['apple', 'banana', 'orange', 'grape']
//錯誤示例
const colors=['red', 'blue', 'green'];
colors=['pink', 'black', 'white'] //←ERROR!!

let

block

block是指大括弧 {} 裡面。
像是if述句,for述句,function裡面都是block

  • global scope→任何地方都能被改
  • block socpe→在if述句,for述句,function裡面可以被改(大括號包起來的地方),在外面還是回到初始值
  • function scope→只有在function裡面才可以被改

let 的特性

  1. 可以被修改
  2. 如果有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的特性

  1. 可以被重新定義(redefined)
  2. 可以被更新(updated)
  3. 若存在於函式內(function),就是函式變數(function scope),只能在函式內部被存取、修改。
  4. 若沒再函式內,會變成全域變數(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 > 40) {
 var winner = true
 console.log(winner);//true
}

console.log(winner);//true
//因為if不是function,所以winner變成全域變數
//能在任何地方被修改與存取

建立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;//設定畫布=全螢幕

開始作畫(添加圖形元素)

  1. 先設定顏色
  2. 再設定圖形
//填色
ctx.fillStyle="#FFA500";


//畫正方形
ctx.fillRect(400, 400, 100, 100);
//※顏色要在最上面,否則正方形會變成黑的