전에 쓴 적이 있습니다. 블로거는 베이징에서 열심히 일하는 코더입니다. 그는 5년 동안 프론트엔드 작업을 해왔고 다양한 유형의 프로젝트를 10개 이상 수행했습니다. 최근에 기분 좋게 여기에 글을 썼습니다. 환영합니다. 모두의 조언.
- 기사 내용에 오류가 있으면 비판과 지적을 해주시고, 제때 바로잡도록 해주세요.
- 토론하고 배우고 싶은 질문이 있으면 저에게 연락하십시오 : [email protected].
- 게재된 기사의 스타일은 칼럼마다 다르며, 모두 독립적이므로 부족한 점은 지적해 주시기 바랍니다.
프런트엔드는 메소드를 사용하여 모든 페이지에 사용자 정의 텍스트 워터마크를 추가합니다.
이 문서의 키워드: 워터마크, 사용자 정의, 공개 방법, 원하는 대로 텍스트 추가
아래와 같은 방법:
addWaterMarker(str){
var can = document.createElement('canvas');
var body = document.getElementById("app");
body.appendChild(can);
can.width=200;
can.height=150;
can.style.display='none';
var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180);
cans.font = "16px Microsoft JhengHei";
cans.fillStyle = "rgba(17, 17, 17, 0.30)";
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str,can.width/6,can.height/2);
body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
},다음을 사용하여 테스트합니다.
탑재() {
this.addWaterMarker('장젠젠(Zhang Jianzhen)이 테스트 중입니다.');
}
결과 보여줘:
기사 포털: