我使用的jQuery版本是2.1.1、網頁是HTML5，在取得canvas物件時，卻沒有反應。
原來在jQuery取得canvas物件需要有一點「眉角」
Javascript的語法如下：
var canvas = document.getElementById('canvasTEST');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#0000FF";
ctx.fillRect(10,50,100,100);
canvas.addEventListener( "mousedown", mouseDown );
function mouseDown() {
ctx.beginPath();
ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 10;
ctx.moveTo(10,10);
ctx.lineTo(50,200);
ctx.stroke();
}
JQuery的語法如下：
var $canvas = $('#canvasTEST');
var ctx = $canvas[0].getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#0000FF";
ctx.fillRect(10,50,100,100);
$canvas.mousedown(function (e) {
ctx.beginPath();
ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 10;
ctx.moveTo(10,10);
ctx.lineTo(50,200);
ctx.stroke();
});
兩者的差異在此：
var ctx = canvas.getContext('2d');
var ctx = $canvas[0].getContext('2d');
網路上有人解釋如下：
Because getContext('2d') works on DOM element,
where var 「$canvas = $('#canvas1');」return a jQuery object but node a DOM element.
And to retrieve a DOM element from jQuery object you need to use $canvas[0].
完整的HTML5語法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TESTING</title>
</head>
<body>
<canvas id="canvas1" width="300" height="300" style="border: 2px solid #999900" />
</body>
</html>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
var $canvas = $('#canvasTEST');
var ctx = $canvas[0].getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#0000FF";
ctx.fillRect(10,50,100,100);
$canvas.mousedown(function (e) {
ctx.beginPath();
ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 10;
ctx.moveTo(10,10);
ctx.lineTo(50,200);
ctx.stroke();
});
</script>
-
在電腦版的Line輸入文字時，遇到需要換行的情形時，我都是用記事本先寫好再複製上去，這樣就可以有換行的效果，可是這樣的做法好像失去Line的便利性。 於是查了一下，原來有一個設定可以指定Enter換行，而不是發訊息出去。 完成設定之後，要發送訊息就改用Al... -
Windows7 / Windows8 kill process Linux下要刪除某個程序通常會使用 ps 配合 kill 來刪除程序。 例如：ps -ef |grep [PROCESS NAME] kill -9 [PID] 在Windows下，通常是...
-
在7月份的時候，利用Google地圖查詢官田區的路線，偶然發現「官田新訓中心(度假村)」，地點卻是我以前當兵時的新訓中心，難道當年的官田新訓中心已經被裁撤，改為飯店還是觀光景點嗎？ 將Google地圖轉為街景模式，看見的還是新訓中心的門口，幾乎與我腦中的印象一樣，沒有什...