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...