【Jquery】canvas繪圖1 - 矩形

畫矩形

Html:

<canvas id="myCanvas" width="100" height="100"></canvas>

Javascript:

$ele = $('#myCanvas').css({border: '1px solid #333'}).get(0);
// 不能使用CSS的width跟height 或在canvas標籤上寫長寬 也可不限制
$ele.width = 100; 
$cv = $ele.getContext('2d'); // 畫布環境 用Jquery要取得物件要加上get(0)
//$cv = document.getElementById('myCanvas').getContext("2d"); // 用document.getElementById的方法
$cv.fillStyle = "rgba(0,0,255,0.5)";
$cv.fillRect(0,0,50,50);
$cv.fillStyle = "rgba(255,0,0,0.8)";
$cv.fillRect(50,50,100,100);

結果: