- ベストアンサー
JavaScriptによる複数の円の描画
- JavaScriptを使用して複数の円を描画する方法について教えてください。
- 複数の円を描画する際、回答で示された方法で円を追加すると予期しない図形になってしまいます。どのように修正すれば良いでしょうか。
- 円を描画する際に使用される変数やループの設定についても教えてください。
- kuro00kuro
- お礼率60% (33/55)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- JavaScript/HTML5での図形の描写
canvasを使って図形の描写をするコードを書いています。 javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。 「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。 【以下書いたコード】 function draw() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var r = parseInt(document.getElementById("radius").value); ctx.beginPath(); var drawPointX = Math.floor( Math.random() * 1200 ) + 1; var drawPointY = Math.floor( Math.random() * 600 ) + 1; ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true ); //ランダムな色を生成・彩色する var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle=rgba; ctx.stroke(); }
- ベストアンサー
- JavaScript
- flashで円の描画。
長文失礼します。 FLASH,CS3でActionScript2.0で作業しています。 FLASHで複数の円を重ねて円グラフの様な描画をしたくて、ネット上にあったソースを自分で少しいじりました。 しかし複数の円を描画しようとすると他の円が消えてしまいます。 外部に円を描画するスクリプト（DrawArc.as）がおいてあります。 //DrawArc.as class DrawArc { var mc:MovieClip; function DrawArc(target:MovieClip) { mc = target; } function drawLine(x:Number, y:Number, radius:Number, arc:Number, startAngle:Number, thickness:Number, color:Number, alpha:Number, yRadius:Number) { mc.clear(); mc.lineStyle(thickness,color,alpha,false,"none","none"); mc.moveTo(x,y); if (arguments.length<8) { return; } if (yRadius == undefined) { yRadius = radius; } if (Math.abs(arc)>360) { arc = 360; } var segs = Math.ceil(Math.abs(arc)/45); var segAngle = arc/segs; var theta = -(segAngle/180)*Math.PI; var angle = -(startAngle/180)*Math.PI; var ax = x-Math.cos(angle)*radius; var ay = y-Math.sin(angle)*yRadius; if (segs>0) { for (var i = 0; i<segs; i++) { angle += theta; var angleMid = angle-(theta/2); var bx = ax+Math.cos(angle)*radius; var by = ay+Math.sin(angle)*yRadius; var cx = ax+Math.cos(angleMid)*(radius/Math.cos(theta/2)); var cy = ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2)); mc.curveTo(cx,cy,bx,by); } } } } そしてFLASHのフレーム内に import DrawArc; mc = new DrawArc(this); targetNum = 0; onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } else { delete this.onEnterFrame; } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x69f203,100); } とかいてあります。 これで円を描画してくれるんですが、 さらにもう一つの円を重ねて表示させたいので FLASHのフレーム内に import DrawArc; mc = new DrawArc(this); mc2 = new DrawArc(this);//新しい用 targetNum = 0; targetNum2 = 0;//新しい用 onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } if (targetNum2<=210) { targetNum2 += 2; change2(); } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x002503,100); mc.mc.swapDepths(10); trace(mc.mc.getDepth()); } function change2() { mc2.drawLine(Stage.width/2,65,40,-targetNum2,90,30,0x69f203,100); mc2.mc.swapDepths(11); trace(mc2.mc.getDepth()); } と書いたのですがDepthが両方とも10になってしまいます。このDepthが別々になれば両方ちゃんと表示されると思うのですが、手詰まりになってしまいました。 どなたか解決策が分かる方教えてください。
- ベストアンサー
- Flash
- javascriptによる図形の制御
javascriptで極小の円を書いて書いたものが、徐々に色が変化しながら大きくなり一定の大きさになると、 元の大きさに変化しながら別の色になるというのを作りたいと思っております。 色は最初がグリーンで、最大時が赤、収縮時が青としたいのですが、何卒お力をお貸し下さい。 以下は自分が途中まで考えたものですが、この考えでは不可能であれば別の方法でお教え下さい。 よろしくお願いいたします。 $('#実行ボタン名').click(function(){ var index = 0; var timer = window.setInterval( function(){ index++; var canvas = document.getElementById('キャンバス名'); ctxt = canvas.getContext('2d'); if (index >= 25){ //if //25になった時の処理 /* ctxt.fillStyle = '色 ？？？'; ctxt.arc(100, 80, ？？？, Math.PI*2, false); ctxt.fill(); */ }else{ ctxt.fillStyle = '色 ？？？'; ctxt.arc(100, 80, 1 + index, 0, Math.PI*2, false); ctxt.fill(); } }, 200 )
- ベストアンサー
- JavaScript
- Javascript について質問です。
現在、メソッドについて勉強しています。 下記のようなプログラムを書き、円の面積、円の円周を求めました。 下記のプログラムを実行したところ、undefined と出力されました。 いまいちメソッドの使い方もわかってないので、お見苦しい点が多いですが、出力の仕方が間違っているのか、宣言の仕方が間違っているの正直、よくわかりません。 すいませんが、教えて頂けないでしょうか？ function Circle (radius) { this.radius = radius; this.area = function () { return Math.PI * this.radius * this.radius; }; // define a perimeter method here this.perimeter=function(){ return Math.PI * this.radius *2 }; }; var A=new Object(); A.new=Circle ; console.log(A.new(2));
- ベストアンサー
- JavaScript
- JavaScriptでのアニメーション
JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。 任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。 任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。 以下コード。これより上と下は省略してあります。 <script type="text/javascript"> var speedX = 3.0; var speedY = 4.0; var locX = parseInt(document.getElementById("ｘ").value); var locY = parseInt(document.getElementById("y").value); //locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる var ctx; function anim(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ ctx = canvas.getContext('2d'); setInterval(draw, 60); } } function draw(){ ctx.globalCompositeOperation = "source-over"; var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle = rgba; ctx.fill(); ctx.globalCompositeOperation = "lighter"; locX += speedX; locY += speedY; if(locX < 0 || locX > 800){ speedX *= -1; } if(locY < 0 || locY > 600){ speedY *= -1; } ctx.beginPath(); ctx.fillStyle = rgba; ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true); ctx.fill(); } </script> </head> <body> <p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>
- ベストアンサー
- JavaScript
- HTML5のcanvasで描画がされない
HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 'hair1.png', 'hair2.png', 'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>
- ベストアンサー
- JavaScript
- flashのムービークリップにリンクを複数張る方法
flash初心者です。質問します。 ムービークリップのMATRIXと円運動関数を使用して、3Dに回転するナビゲーションを作成したいのですが、ムービークリップ毎に個別にリンクを貼る方法が分からず、行き詰っています。 スクリプトは後記に記述しますが、this.onRelease=function() と getURL(url, "_blank");で 指定URLに飛んでくれるのですが、全てのムービークリップに１つのURLが適用されてしまい ナビゲーションとしての意味がなくなってしまいます。 var url = ("http://www.yahoo.co.jp/");の部分にURLを付け足してみたり色々試したのですが、 うまくいきません。 緊急なので、早めにお返事いただけるとありがたいです。何卒、よろしくお願いします。 ▼ 以下が問題のスクリプトです ▼ import flash.geom.Matrix; import flash.filters.BlurFilter; var composer:Array=new Array("a","b","c", "d","e","f","g","h", "i","j"); var url = ("http://www.yahoo.co.jp/"); var num = 10; var speed:Number; var diff:Number = 0; var rd:Number; var a:Number; var depth:Number; var v:Number; this.createEmptyMovieClip("composerNameBox",100); composerNameBox.createTextField("tf",120,0,0,220,25); composerNameBox._x = -10; composerNameBox._y = 145; for (i=1; i<=num; i++) { var mc = this.attachMovie("sp"+i, "sp"+i, i); mc.n = i; mc.onEnterFrame = circulating; } function circulating() { speed = (Stage.width/2-_xmouse)*0.005*0.001*Math.PI; diff += speed; rd = diff+this.n/num*2*Math.PI; a = Math.sin(rd) b = 0.3*Math.cos(rd); c = 0; d = 1; mcx = 100-200*Math.cos(rd); mcy = 40+40*Math.sin(rd); var myMatrix:Matrix = new Matrix(a, b, c, d, mcx, mcy); this.transform.matrix = myMatrix; depth = Math.floor((3+Math.sin(rd))*2500); this.swapDepths(depth); if (this.rollover) { v = 5; } else { v = Math.floor((1-Math.sin(rd))*5.5); } blurChange(this); this.onRollOver=function() { this.rollover = true; composerNameBox.tf.text = composer[this.n-1]; txtFormat(composerNameBox); } this.onRollOut=function() { this.rollover = false; composerNameBox.tf.text = ""; } this.onRelease=function() { getURL(url, "_blank"); } } function blurChange(this_mc) { var myBlur:BlurFilter = new BlurFilter(v, v, -5); this_mc.filters = [myBlur]; } function txtFormat(mc) { var format = new TextFormat(); with (format) { size = 12; color = 0x000000; align = "center"; bold = true; } mc.tf.setTextFormat(format); }
- ベストアンサー
- Flash
- 色変換のライブラリ探してます
PHPでHSBまたはHSLからhexの色の値を出せるライブラリとかを探してます HSBまたはHSLから一方通行の変換だけできれば十分です また、なければ前にAS3で書いたのを 転用しようかと思ってるんですが とくになんの資料もなくテキトーに こうすればいけんじゃね？的に作ったものなので いろいろ不安です、ムダな処理とか そもそもHSBについて基本的に間違ってるとことか あったら指摘ください public static function HSBClr(H:Number,S:Number,B:Number):int { var H=Math.abs(H%360)/60; while(H<0)H+=6 var S=Math.min(Math.abs(S),100)/100 var B=Math.min(Math.abs(B),100)/100 var rtn:int=0x010101*Math.floor(B*(1-S)*255); var c=255*S*B; var r:int=0; var g:int=0; var b:int=0; if (H<1) { r=Math.floor(c); g=Math.floor(c*H); } else if (H<2) { r=Math.floor(c*(1-H%1)); g=Math.floor(c); } else if (H<3) { g=Math.floor(c); b=Math.floor(c*(H%1)); } else if (H<4) { g=Math.floor(c*(1-H%1)); b=Math.floor(c); } else if (H<5) { b=Math.floor(c); r=Math.floor(c*(H%1)); } else { b=Math.floor(c*(1-H%1)); r=Math.floor(c); } rtn+=r*0x010000+g*0x0100+b; return rtn; }
- ベストアンサー
- PHP
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
お礼
出来ました。ありがとうございます。