botan887 - 経済統計練習帳

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<script src="sample.js"></script>
        <script src="jquery.js"></script>
<script src="svgpaint.js"></script>
        <title>パチンコ</title>
    </head>
    <body onload="sample()">
 
 <p id="memo"></p>
 <button id="bu" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
 </button>
 
 </body>
</html>
 
 
var x=new Array();
var y=new Array();
var number_p;
 
function sample(){
 
    number_p=0;
 
    $("#memo").click(function (e) {
        var xx = e.clientX;
	var yy = e.clientY;
        number_p=number_p+1;
        x[number_p]=xx;
        y[number_p]=yy;
 
        paint();
 
    });
 
  $("#bu").click(function (e) {
       alert("hello");
 
    });
 
 
    paint();
 
}
 
function paint(){
 
 
    var sub=new svgpaint();
 
   str="<svg width=\"500\" height=\"500\">";
   str=str+img(0,0,500,500,"ren.jpg");
   for(s=1;s<number_p+1;s++){
  str=str+sub.rect(x[s],y[s],5,5,"blue");
   }
    str=str+"</svg>";
 
   $("#memo").html(str);
 
 
 
}
 
 
function img(x,y,w,h,pic){
 
 str="<image x="+chop(x)+" y="+chop(y)+" width="+chop(w)+" height="+chop(h)+" xlink:href="+chop(pic)+"/>";
 
 return str;   
}
function chop(st){
 
strx="\""+st+"\"";    
 
return strx;
}