an_03

소스보기

<style>
  canvas{
    border: 1px solid blue;
  }
  </style>
<canvas id="canvas1" width="679px" height=" 400px"></canvas>

<script>
	if (self.name != 'reload') {
         self.name = 'reload';
         self.location.reload(true);
     }
     else self.name = ''; 
//window.location.reload(1);
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');

let links_array = [];
function linkRect(id, x, y, width, height, fillColor, name, url, type){
this.id = id;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.workWidth = {
start : x,
end : x + width,
}
this.workHeight = {
start : y,
end : y + height,
}
this.fillColor = fillColor;
this.name = name;
this.url = url;


}


var link  = new linkRect(0, 50, 10, 250, 50, "#ff0000", "Google", "https://google.com", 1);
links_array.push(link);
var link = new linkRect(1, 50, 100, 250, 50, "#0000ff", "Daum", "https://daum.net", 1);
links_array.push(link);
var link = new linkRect(2, 50, 200, 250, 50,"#00ff00", "Naver", "https://naver.com", 1);
links_array.push(link);
var link = new linkRect(3, 50, 300, 250, 50, "Yellow", "Myblog", "https://booolean.tistory.com", 1);
links_array.push(link);
  var link = new linkRect(4, 350, 10, 250, 50, "#f0f0f0", "contents1", "https://booolean.tistory.com", 1);
links_array.push(link);
  var link = new linkRect(5, 350, 100, 250, 50, "#0f0f0f", "Contents2", "https://booolean.tistory.com", 1);
links_array.push(link);
  var link = new linkRect(6, 350, 300, 250, 50, "#fff000", "Contents3", "https://booolean.tistory.com", 1);
links_array.push(link);

function drawLinkRect(){
links_array.forEach(function(link, i, arr){
context.beginPath();
context.fillStyle = link.fillColor;
context.fillRect(link.x, link.y, link.width, link.height);
context.fill();
context.font = "25pt Calibri";

context.fillStyle ="#000000";
context.strokeStyle = "#00ffff";
context.lineWidth = 1;
context.strokeText(link.name, link.x+50, link.y + 40);
//context.fillText(link.url, link.x +50, link.y + 80);
});
}
drawLinkRect();
canvas.onclick = function(e) {
  event = e;
  //checkClick(event);
  var elementClickedId = checkClick(event);
    if (elementClickedId != 0) {
           window.location =  elementClickedId[1];
  }
}

canvas.onmousemove = function(e) {
  var elementUnder = checkClick(event);
  if (elementUnder == 0) {
      changeCursor('default');
  } else {
      changeCursor('pointer'); 
  }
}

  
canvas.onmouseout = function(e) {
  changeCursor('default');
}


function changeCursor(cursorType){
  document.body.style.cursor = cursorType;
}

//context.fillRect(tile.x, tile.y, tile.width, tile.height);

function checkClick(event) {
  var clickX = event.layerX;
  var clickY = event.layerY;
  
  let element_array = [];
  links_array.forEach(function(link, i, arr) {
    if (
      clickX > link.workWidth.start &&
      clickX < link.workWidth.end &&
      clickY > link.workHeight.start &&
      clickY < link.workHeight.end
    ) {
      element_array.push(link.id);
      element_array.push(link.url);
    }else{
      return;
    }
  });
  return element_array;
}
  
</script>