JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » EJB / 其它Java EE 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 html網頁元件事件的聆聽
lonely741215

數學才是王道



發文: 196
積分: 0
於 2013-09-12 21:29 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
   <head>
      <title>Patterns</title>
      <meta charset="utf-8"/>
      <style type="text/css">
         #canvas {background:#eeeeee;
                  border:thin solid cornflowerblue;}
         #radios {padding:10px;}
      </style>
   </head>
   <body>
      <div id="radios">
         <input type="radio" name="patternRadio" id="repeatRadio" checked="checked"/>repeat
         <input type="radio" name="patternRadio" id="repeatXRadio"/>repeat-x
         <input type="radio" name="patternRadio" id="repeatYRadio"/>repeat-y
         <input type="radio" name="patternRadio" id="noRepeatRadio"/>no repeat
      </div>
      <canvas id="canvas" width="450" height="275">
         Canvas not supported
      </canvas>
      <script src="source.js"></script>
   </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var repeatRadio = document.getElementById("repeatRadio");
var noRepeatRadio = document.getElementById("noRepeatRadio");
var repeatXRadio = document.getElementById("repeatXRadio");
var repeatYRadio = document.getElementById("repeatYRadio");
var image = new Image();
 
function fillCanvasWithPattern(repeatString)
{
  var pattern = context.createPattern(image,repeatString);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fillRect(0, 0, canvas.width, canvas.height);
}
 
var radios = document.getElementById("radios");
var child = radios.getElementsByTagName("input");
var childName = new Array(child.length);
childName[0] = "repeat";
childName[1] = "repeat-x";
childName[2] = "repeat-y";
childName[3] = "no-repeat";
for(var i = 0 ; i < child.length ; i++)
{
  child[i].onclick = function(e)
  {
    fillCanvasWithPattern(childName[i]);  //這個for迴圈希望可以簡單去讓每個child都加上事件,不過不知道為什麼
  };                                        //只要使用for,就讀不到事件,如果我把for移除,然後把child逐一.onclick
}                                             //那麼事件的聆聽就很正常
image.src = "anim02.gif";
image.onload = function(e)
{
  fillCanvasWithPattern(childName[3]);
};


各位好,以上code源自書上的例子,小弟試圖用for迴圈來完成事件的聆聽,以免元件太多,逐一去加入會很麻煩,不過也不知道為什麼,如果逐一加入事件聆聽就沒問題,可是如以上的寫法就讀不到,想請教各位大大指點,先謝謝了Shy


reply to postreply to post
數學啊數學~總有一天我要狂嗑你!!
話題樹型展開
人氣 標題 作者 字數 發文時間
1315 html網頁元件事件的聆聽 lonely741215 2247 2013-09-12 21:29
1149 Re:html網頁元件事件的聆聽 Duncan 2838 2013-09-13 00:22
1117 Re:html網頁元件事件的聆聽 simpleisgood 1542 2013-09-13 01:20
1383 Re:html網頁元件事件的聆聽 lonely741215 35 2013-09-13 17:25
» JWorld@TW »  EJB / 其它Java EE 討論區

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8