記錄使用canvas 製作文字背景水印
// 首先建立canvas標籤 並設定畫布大小
var watchcanvas = document.
createelement
('canvas');
// 建立canvas標籤
watchcanvas.id =
'mycanvas'
;// 設定canvas id名
watchcanvas.width =
'300'
;// 設定畫布大小
watchcanvas.height =
'120'
; watchcanvas.style.display =
'none'
;// 隱藏畫布
document.documentelement.
(watchcanvas)
;// 將畫布插入到document中
// 建立 畫布內容
var c = document.
getelementbyid
('mycanvas');
// 獲取畫布
// 獲取畫布上下文
var ctx = c.
getcontext
('2d');
// 設定字型文字大小及字型型別
ctx.font =
'20px arial'
;// 設定旋轉角度 格式 (-45 * math.pi) / 180
ctx.
rotate((
-45* math.pi)
/180);
// 設定水印實心文字及偏移量 filltext(text, x, y) stroketext(text,x,y) 說明 text | 在畫布上出現的值, x 在x方向上的值(相對於畫布), y 在y方向上的值(相對於畫布);
ctx.
filltext
('hello word',-
40,80)
; ctx.
filltext
('canvas',30
,160);
// 生成base64格式的路徑
var curl = c.
todataurl
('image/png');
// 將作為背景樣式插入
document.
queryselector
('.container'
).style.background =
'#bf0000 url('
+ curl +
')';
// 設定水印文字旋轉偏移量時 注意是先旋轉在偏移 這個時候的偏移量是以偏轉之後的座標軸為基礎的
// todataurl(type, encoderoptions) 方法 type | 可選 預設值為'image/png', encoderoptions | 可選 在指定格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區間內選擇的質量。如果超出取值範圍，將會使用預設值 0.92。其他引數會被忽略。
vue中使用 canvas給頁面新增水印
vue中使用canvas 給頁面新增水印 1.寫乙個公共的方法，放在專案utils資料夾中 watermark.js str傳入水印需要展示的文字，renderdom水印要加的盒子，預設body var watermark var setwatermark function str,renderdo...
canvas 繪製好看的背景
function 封裝方法，壓縮之後減少檔案大小 function get by tagname name 獲取配置引數 function get config option 設定canvas的高寬 function set canvas size 繪製過程 function draw canvas...
如何使用Word2010製作漂亮的水印
word2010水印製作怎樣實現呢？word2010內建有多種水印但這些水印滿足不了使用者的需要，下面就簡單的交流一下。作操作步驟如下所示 第一步 開啟word2010文件視窗，切換到 頁面布局 功能區。在 頁面背景 分組中單擊 水印 按鈕，並在開啟的水印面板中選擇 自定義水印 命令。選擇 自定義水...