2013年11月25日
Snap.svg.jsを使う
Snap.svg.jsを使ってみた。
ていうかJavaScriptを書くのがかなり久々だ。
習得しやすいスクリプト言語のはずなのに、CとかC++、Javaよりわからんかったから。
でも、今の俺なら見える。見えるぞ、ウェブ開発の道が。
<!DOCTYPE html>
<html>
<title>try! snap.svg.js</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="snap.svg-min.js"></script>
<script>
function Mydraw(){
var s = Snap("#Maru");
var circ = s.circle(100,100,50);
circ.attr({
fill: "#ff0000",
stroke: "#0000ff",
strokeWidth: 15
});
circ.click(function () {
alert("Clicked!");
circ.attr({
fill: "#fc0"
});
});
}
</script>
</head>
<body onload= "Mydraw()">
<svg id="Maru">
</svg>
</body>
</html>
現代の俺のようなアマチュアを含めたプログラマーは有用なライブラリが揃っているので幸福であるとも言える。
JavaScriptってなんかやだなーって避けてたけど、Snap.svgがほんとに面白そうなので、改めて習得することにするぞ。
ていうかJavaScriptを書くのがかなり久々だ。
習得しやすいスクリプト言語のはずなのに、CとかC++、Javaよりわからんかったから。
でも、今の俺なら見える。見えるぞ、ウェブ開発の道が。
<!DOCTYPE html>
<html>
<title>try! snap.svg.js</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="snap.svg-min.js"></script>
<script>
function Mydraw(){
var s = Snap("#Maru");
var circ = s.circle(100,100,50);
circ.attr({
fill: "#ff0000",
stroke: "#0000ff",
strokeWidth: 15
});
circ.click(function () {
alert("Clicked!");
circ.attr({
fill: "#fc0"
});
});
}
</script>
</head>
<body onload= "Mydraw()">
<svg id="Maru">
</svg>
</body>
</html>
現代の俺のようなアマチュアを含めたプログラマーは有用なライブラリが揃っているので幸福であるとも言える。
JavaScriptってなんかやだなーって避けてたけど、Snap.svgがほんとに面白そうなので、改めて習得することにするぞ。
taishudoor at 04:05│Comments(0)│大周
