Canvas - 15 Create HyperLink in Canvas

Canvas - 15 Create HyperLink in Canvas

콘텐츠 제작 진행중

Canvas - Insert HyperLink 

 

Canvas - Clickevent

 

https://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element

 

 

<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, 50, 250, 50, "#ff0000", "Google", "https://google.com", 1);
links_array.push(link);
var link = new linkRect(1, 400, 50, 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, 400, 200, 250, 50, "Yellow", "Myblog", "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);
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);
    }
  });
  return element_array;
}
</script>