クロスブラウザ、JSまたはCSS、単純な円を作成し、半径と色を変更できるようにする方法。
私は .png ソリューションを除外しませんが、カスタマイズ可能でなければなりません (サイズはpixels、色はhex)。
IE7,8 は必須、IE6 はオプションです。
質問する
873 次
4 に答える
4
Raphaelのようなライブラリを使用して円を作成するのはどうですか。クロスブラウザで、89Kb と非常に軽量です。準拠ブラウザには SVG を使用し、IE には VML を使用します。
Raphaël は現在、Firefox 3.0 以降、Safari 3.0 以降、Chrome 5.0 以降、Opera 9.5 以降、および Internet Explorer 6.0 以降をサポートしています。
ホームページにある簡単な円の例を次に示します。
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
于 2012-12-20T13:59:48.957 に答える
2
<svg width="200" height="200" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example circle01 - circle filled with red and stroked with blue</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="198" height="198"
fill="none" stroke="blue" stroke-width="2"/>
<circle cx="100" cy="100" r="50"
fill="red" stroke="blue" stroke-width="10" />
</svg>
または HTML5 を使用canvas:
<canvas id="canvas" width="400" height="400"></canvas>
//get the canvas' context.
var c = document.getElementById('canvas').getContext("2d");
// Draw canvas outline
c.fillStyle="blue";
c.fillRect(0,0,200,200);
c.fillStyle="#fff";
c.fillRect(2,2,200- 4,200- 4);
//draw the circle
c.fillStyle="#f00";
c.beginPath();
c.arc(100, 100, 50, 0, Math.PI*2, true);
c.closePath();
c.fill();
c.lineWidth = 10;
c.strokeStyle = '#00f';
c.stroke();
ただし、これらの手法はいずれも IE 8 以前ではサポートされていないことに注意してください。
于 2012-12-20T13:52:12.653 に答える
0
これがオールディーズですが、グッディーズです。完全にクロスブラウザのコンパチナ、SVG、Canvasなどは必要ありません：
http://codecorner.galanter.net/2008/01/16/dhtml-javascript-graphics-draw-without-flash/
于 2012-12-20T17:27:43.597 に答える
-1
font-face を使用して任意の形状を作成することもできます:
このフォントには円があります: http://www.fontriver.com/font/fnt_basic_shapes_1/
境界線が必要な場合は、別のものを重ねることができます。
于 2012-12-20T14:07:27.483 に答える