オブジェクトに新しい関数を追加したい。
- オブジェクトに新しい関数を追加する方法について教えてください。
- canvasオブジェクトにline関数を追加したいですが、うまくいきません。
- documentオブジェクトに関数を追加することは可能でしょうか？
- ベストアンサー
オブジェクトに新しい関数を追加したい。
いつもお世話になってます！ このサイトでいろいろと勉強させて頂いています！ 表題の通り、あるオブジェクトに新しい関数を追加したいですが、書き方が悪いのかうまく行きません。 例えば、変数名canvasというdivオブジェクトを生成したとします。 var canvas = document.createElement('div'); このcanvasにline(start_x,start_y,end_x,end_y)なんて線を描く関数を付けたいな…と思ったのです。 理想として、以下のような書き方がしたいのです。 var canvas = document.createElement('div'); canvas.setSize(0,0,600,400); // divのサイズ canvas.setColor(255,0,0); // 色決め canvas.line(0,0,100,100); // (0,0)～(100,100)に線を引く。 document.appendChild(canvas); こんな事、可能でしょうか？ また、documentに対してこのような関数を追加したりする事は可能でしょうか？ お時間がある時にでも教えていただければと思います。
- t_netbug
- お礼率73% (11/15)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞線を描く関数 を知りたいのではなく、たんにメソッドの実装方法さえわかれば いいんですよね？ <head> <script> window.onload=function(){ var canvas=document.createElement("div"); entry(canvas); canvas.setSize(600,400); canvas.setColor(255,0,0); canvas.line(0,0,100,100); document.getElementsByTagName("body")[0].appendChild(canvas); } function entry(obj){ obj.setSize=setSize; obj.setColor=setColor; obj.line=line; } function setSize(x,y){ } function setColor(r,g,b){ } function line(x0,y0,x1,y1){ } </script> </head> <body> </body> みたいな形で実装すればいいのでは？ 蛇足ですが、canvas.setColor(255,0,0);としてますが、 イメージ的にこれだとキャンバスの背景色を指定しているみたいな 感じがしますね・・・命名方法などよく検討されるといいと 思います
関連するQ&A
- 要素を追加する関数の作成
<div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。
- ベストアンサー
- JavaScript
- IEの「explorercanvas」で作ったCANVASがスクロール
IEの「explorercanvas」で作ったCANVASがスクロール出来ない HTML5の<canvas>要素を、擬似的に使えるようにした「explorercanvas」↓ http://code.google.com/p/explorercanvas/ ですが、これを使って<canvas>要素を<div>要素の中に配置したんですが、 親の<div>ボックスをスクロールしても、canvasがスクロールされません。 本物の<canvas>要素はちゃんと出来ます。（FirefoxとChromeで確認） 何か代替策ないでしょうか？（canvas内に再描画しろってか..） （実験したコード） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Test</title> <style type="text/css"> </style> <!--[if IE]><script src="/jslib/excanvas.js"></script><![endif]--> </head> <body> <p>CANVAS</p> <h2 style="text-align:center">Canvas TEST By HTML5 or IE(excanvas.js)</h2> <div id="hoge" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <p>イメージ</p> <div id="fuga" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <script type="text/javascript"> //CANVASの場合 var container1 = document.getElementById("hoge"); var canvas = document.createElement("canvas"); canvas.width = 2000; canvas.height = 500; container1.appendChild(canvas); if (typeof(G_vmlCanvasManager) != 'undefined') canvas = G_vmlCanvasManager.initElement(this.canvas); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = "/image/mio.jpg" + "?" + new Date().getTime(); img.onload = function() { ctx.drawImage(img,0,0,2000,500); } container1.scrollLeft = 500; //imgの場合 var container2 = document.getElementById("fuga"); var img2 = new Image(); img2.src = "/image/yui.jpg" + "?" + new Date().getTime(); img2.style.width="2000px"; img2.style.height="500px"; container2.appendChild(img2); container2.scrollLeft = 500; </script> </body> </html>
- ベストアンサー
- JavaScript
- 効率良くイベントに引数を渡すやり方
sample2に引数「x」「y」を渡したいが為に 次のように何段階も同じような作業をしなくてはならない方法しか 自分は思いつかないのですが、何かもっと効率的な方法はあるのでしょうか？ function main() { var element = document.createElement('div'); element.x = x; element.y = y; element.onclick = function(){ sample1(this.x, this.y); }; } function sample1(x, y) { var element = document.createElement('span'); element.x = x; element.y = y; element.onclick = function(){ sample2(this.x, this.y); }; } function sample2(x, y) { alert("x="x+" y="+y); }
- ベストアンサー
- JavaScript
- html canvas javascript
html canvas javascript 要素オブジェクト html の canvas を使用して線、円、四角などの図形を作成 できますが、それらの線、円、四角などを要素オブジェクトのように javascript で操作することはできますか、色、大きさなど document.getElementById("aaa") のような方法で ｓｖｇではできるようですが、 canvas でやりたいので、そのやり方がわかる人は 教えてください
- 締切済み
- ホームページ作成ソフト
- javascriptでrgbを用いてスタイル設定を行った時の挙動
こんにちは。 勉強の為、プログラムの作成中に気になる動作がありました。 style.backgroundでrgbで赤を設定したはずなのに深い緑色が表示されてしまいますが、何が原因なのでしょうか？ 以下は学習で作っていたプログラムです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-script-type" content="text/javascript"> <title>test</title> <script type="text/javascript"> <!-- function Graphics(obj){ var obj = obj ? obj : document.createElement('div'); var canvas = (obj.ownerDocument) ? obj : ( document.getElementById(obj) ? document.getElementById(obj) : document.createElement('div') ); canvas.style.position = "absolute"; canvas.style.top = "0px"; canvas.style.left = "0px"; canvas.style.width = "10px"; canvas.style.height = "10px"; } Graphics.prototype = { setColor : function(r,g,b){ // 色設定用(1) canvas.style.background = rgb; },setColor : function(color){ // 色設定用(2) canvas.style.background = color; },setSize : function(sx ,sy ,ex ,ey){ // 線画領域設定用 canvas.style.top = sx + "px"; canvas.style.left = sy + "px"; canvas.style.width = ex + "px"; canvas.style.height = ey + "px"; } } window.onload = function(){ var g = new Graphics("canvas"); // 存在するIDを入れた時 // var g = new Graphics("canvas2"); // 存在しないIDを入れた時 // var g = new Graphics(); // 引数が空の時 g.setColor(255,0,0); g.setSize(100,100,100,100); } // --> </script> </head> <body> <div id="canvas"></div> てｓｔ </body> </html> 問題が発生したブラウザはIE6.0です。 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 要素を指定の場所に追加
お世話になります。 createElementした要素を指定の場所に追加したいのですが どのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 既存オブジェクトに対するプロパティの追加
既存オブジェクトに対してプロパティを追加したいと思っています。 具体的には(後述しますが)ファイル・フォルダオブジェクトに対してです。 (1)自分で作ったオブジェクトの場合 var huga = {}; huga.hoge = "123"; こうするだけで「hoge」プロパティを追加できますよね。 (2)一般的なオブジェクトの場合 Object.prototype.hoge = "123"; とすれば「hoge」プロパティを追加できますよね。 ここまでは知っていました。で、それを踏まえて同じように追加しようと、(1)(2)ともにためしてみたのですがうまくいきませんでした…。 文末のコードでは「item」の配列と、「newName」の配列を別に用意し処理しています。ただ、オブジェクトの意味合いからして、各独立に配列を用意するのはダサすぎます。で、item自体に「newName」プロパティを追加しようと思ったのですがこれがうまくいきませんでした。 ◎質問 ・この「item」オブジェクトにプロパティを追加することは出来るか ・出来ないのならなぜ出来ないのか。(拡張不可属性とかあるの？) ・出来るのならその方法 ※htaアプリなので、IEで動けばOKです。 以上、よろしくお願いします。 <html> <body> <input type="button" onclick="ファイル一覧取得()" value="ファイル一覧取得"> <div id="files"></div> <script> var folderItemsArray = []; var newFileNamesArray = []; // (2)で出来なかった例 // Object.prototype.newName = "123"; // FolderItem.prototype.newName = "123"; // Folder.prototype.newName = "123"; // Item.prototype.newName = "123"; function ファイル一覧取得() { folderItemsArray = []; newFileNamesArray = []; var FOLDER_PATH = "C:\\WINDOWS"; // ★ファイル・フォルダの一覧取得 var shell = new ActiveXObject("Shell.Application"); var folderItems = shell.NameSpace(FOLDER_PATH).Items(); var regOpt = "i"; for (var i = 0; i < folderItems.Count; i++) { // ↓このオブジェクトに「newName」を追加したい var item = folderItems.Item(i); if (!item.IsFolder) { newFileNamesArray.push("…"); // ↑別配列を操作している辺りがダサい // ↓本当はこんな感じにしたい。(1)で出来なかった例 // item.newName = "…"; folderItemsArray.push(item); } } 一覧表示(); } /** * ファイル一覧表示 */ function 一覧表示() { var body = ''; for (i = 0; i < folderItemsArray.length; i++) { var item = folderItemsArray[i]; body += "<tr>"; body += "<td>" + item.Size; body += "<td>" + item.Name; body += "<td>" + newFileNamesArray[i]; // ↑別配列を操作している辺りがダサい // ↓本当はこんな感じにしたい // tbodyStr += "<td>" + item.newName; } var table = '<table border="1" cellspacing="0">'; table += body; table += "</table>"; document.getElementById("files").innerHTML = table; } </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptでテキストボックスの追加
下記のコードはただ文章を追加するコードです ここまでは勉強して自分で組んでしっかり動きます この文章を追加するところをテキストボックスにして保存したいのですが その方法がわかりません どこをどう変えれば出来るのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <script> function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("p"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.innerHTML = "これが追加されたｐの領域"; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(0); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>ノードを追加します</h1> <!--初期状態は何にもなし--> <div></div> <div> <p>ここはHTMLで書かれているテキスト</p> </div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html>
- ベストアンサー
- JavaScript
- ソースファイルの処理ロジックについて（文字上の関係で不明点抜粋のみですが）
この部分では何の処理をしているか、教えていただきたいのです function graphArea(start, end){ var size = (end - start) / DAY_LENGTH; var base = document.getElementById("base"); var area = document.createElement("div"); var pointsX = [ START_POINT.LEFT, START_POINT.TOP, (START_POINT.LEFT + size * DATE_SCALE + MARGIN.X / 2), START_POINT.TOP ] var pointsY = [ START_POINT.LEFT, (MARGIN.Y * 3 / 2 + AMPLITUDE * 2), START_POINT.LEFT, (MARGIN.Y / 2) ] area.className = "graphArea"; base.style.width = area.style.width = size * DATE_SCALE + MARGIN.X * 2; base.style.height = area.style.height = (AMPLITUDE + MARGIN.Y) * 2; area.appendChild(polyline(pointsX, LINE_COLOR.AXIS, "classic")); area.appendChild(polyline(pointsY, LINE_COLOR.AXIS, "classic")); base.removeChild(base.firstChild); base.appendChild(area); var basePosition = getAbsolutePosition(base); for(var i=1; i<=size; i++){ var isDelegDay = i % 5 == 0; var sublinePoints = [ (START_POINT.LEFT + DATE_SCALE * i), START_POINT.TOP, (START_POINT.LEFT + DATE_SCALE * i), (START_POINT.TOP - SUBLINE_LENGTH * (isDelegDay ? 2 : 1)) ] area.appendChild(polyline(sublinePoints, LINE_COLOR.AXIS)); if(isDelegDay){ var label = document.createElement("span"); label.className = "pointLabel"; label.style.top = (basePosition.top + START_POINT.TOP - SUBLINE_LENGTH * 2 + LABEL_OFFSET.Y) + "px"; label.style.left = (basePosition.left + (START_POINT.LEFT + DATE_SCALE * i) + LABEL_OFFSET.X) + "px"; label.appendChild(document.createTextNode(i)) area.appendChild(label); } } return area; }
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。 canvas.toDataURL();でデータを6bit毎に分割できています。 それを保存して、 var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。 その後canvasに描画できません。 よろしくお願いします。 var canvas = document.getElementById("myCanvas"); $("#save_button").click(function () { // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas.toDataURL(); // LocalStorageに保存する window.localStorage.setItem("saveKey", base64); }); $("#load_button").click(function () { // LocalStroageからデータを取得する var base64 = window.localStorage.getItem("saveKey"); // Imageオブジェクトを作成し、src属性にデータを設定する var image = new Image(); image.src = base64; image.onload = function(){ // 画像の読み込みが終わったら、Canvasに画像を反映する。 canvas.drawImage(image, 0, 0); } });
- ベストアンサー
- JavaScript
お礼
うおおおおお！凄いデス！ >たんにメソッドの実装方法さえわかればいいんですよね？ お察しの通りです。なるほど、こう書けば良いのですね！ 動作確認も出来ました。ありがとうございます！