vue中使用 canvas給頁面新增水印

vue中使用canvas 給頁面新增水印

1.寫乙個公共的方法，放在專案utils資料夾中 watermark.js

str傳入水印需要展示的文字，renderdom水印要加的盒子，預設body

var watermark = {}

var setwatermark = function(str,renderdom=document.body)；

// 建立乙個畫布

var can = document.createelement('canvas');

// 設定畫布的長寬

can.width = 400;

can.height=400;

var cans = can.getcontext('2d');

// 旋轉角度

cans.rotate(-30*math.pi/180);

cans.font='20px vedana'

// 設定填充繪畫的顏色、漸變或者模式

cans.fillstyle = '#eee';

// 設定文字內容的對齊方式

cans.textalign = 'left';

// 設定在繪製文字時使用過的當前文字基線

cans.textbaseline = 'middle';

cans.shadowcolor = rgba(0,0,0,1);

cans.shadowoffsetx=1;

cans.shadowoffsety = 1;

cans.shadowblur = 3;

// 在畫布上繪製填色的文字（輸出的文字，開始繪製文字的x/y軸座標）

cans.filltext(str,-can.width/16,cans.height/2);

const rectattr = renderdom.getboundingclientrect();

var div = document.createelement('div')

div.id = id;

div.style.pointerevents = 'none';

div.style.position = 'absolute';

div.style.top = rectattr.top+'px';

div.style.left = rectattr.left+'px';

div.style.zindex = '1';

div.style.opacity = '0.3';

div.style.width = rectattr.width+'px';

div.style.height = rectattr.height+'px';

div.style.background='url(' + can.todataurl('image/png') + ')-24px top repeat';

if(rectattr.height===0)
return id;

// 乙個頁面中該方法只允許呼叫一次

watermark.set=function(str,renderdom),0)

}window.onresize=function()

}export default watermark;

2使用 .vue檔案

import watermark from '@/utils/watermark';
export default = this.operatorinfo
watermark.set(operno+opername,document.getelementbyid('container'))})}
}

vue 中使用canvas畫簡單的線條動畫效果

vue 中使用canvas畫簡單的線條動畫效果 問題 1.沒有寫x軸或者y軸不變的邏輯判斷 2.不會畫弧度，不知道弧線怎麼去單個畫素的畫。method中定義方法 getcanvas start,end start position end draw end position getend posit...

Vue框架 頁面元件中使用小組件

小組件在components資料夾中，頁面元件在views資料夾中 一 先寫小組件的vue,比如text.vue 在template設定模板渲染，style設定樣式 tttt 二 頁面元件 home.vue 中使用小組件需要這幾步 1.先導入小組件 import t from components ...

Vue之在vue中使用render

使用components進行渲染得到 建立 vue 例項，得到 viewmodel var vm newvue methods components script body html 使用render 這裡 return 的結果，會 替換頁面中 el 指定的那個 容器 建立 vue 例項，得到 vi...