css/javascript를 통해 대각선 이미지 오버레이

Question

5 비트 불투명도로 설정된 div 오버레이를 만들고 싶습니다.이 오버레이는이 이미지의 첫 번째 텍스트 줄 주위에 대각선 경계 상자를 만듭니다. 그것은 내가 네 모퉁이에 대한 x, y 좌표가 있다면 나는 오버레이를 만들 수 있어야하지만 적절한 구문이 div를 표시하는 것이 무엇인지 알 수 없다고 생각합니다. 이 일을 할 수 있다고 생각하는 것이 잘못 되었습니까? 그렇지 않다면 누군가 그렇게 할 수있는 방법을 가르쳐 줄 수 있습니까? 대신 CSS를 div를 대신 transform 속성을 사용할 수 있습니다 간단한 경우에 대한 canvas 및 자바 스크립트를 사용

Answer 1

.

#diag { 
    background-color: rgba(255, 0, 255, 0.25); 
    width: 700px; 
    height: 60px; 
    position: absolute; 
    left: 100px; 
    top: 160px; 
    transform: rotate(2deg) skew(30deg) 
} 

와 예를 들어, 당신은 국경을 위해 CSS로 쉽게 스타일을 지정할 수 있으며, 그 이벤트 (호버, 클릭)을 위해 직접 사용할 수있는 이미지에서 텍스트의 첫 번째 줄에 위치 사업부를 얻을 수 있습니다.

네 모퉁이를 지정해야하지만 일반적으로 단일 변환만으로는 충분하지 않으며 이미지 위에 놓인 캔버스에 오버레이를 그려야합니다. 이는 캔버스가 기본적으로 투명하기 때문에 사용자가 명시 적으로 그리는 것만 표시되어 다른 영역의 이미지는 그대로 유지됩니다. 사용 예 :

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = canvas.offsetWidth; 
canvas.height = canvas.offsetHeight; 
ctx.beginPath(); 
ctx.moveTo(166, 282); 
ctx.lineTo(855, 296); 
ctx.lineTo(897, 351); 
ctx.lineTo(212, 349); 
ctx.closePath(); 
ctx.fillStyle = "rgba(0, 255, 0, 0.25)"; 
ctx.strokeStyle = "#0F0"; 
ctx.lineWidth = 4; 
ctx.fill(); 
ctx.stroke(); 

나는 (명령을 입력)도 경계 (행정 명령)를 추가 녹색으로 세 번째 행을 강조했습니다.

http://jsfiddle.net/hr9afs4z/1/