以前にも書きました。このブロガーは北京で勤勉なプログラマーです。彼は 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('張建真はテスト中');
}
結果を示す：
記事ポータル: