昨天介紹了一個生成二維碼的插件QRCode.js，它是借助HTML5 Canvas繪制而成。所以，今天的主角就是canvas啦–canvas的實際應(yīng)用。
一、下載二維碼（查看如何生成二維碼）
HTMLCanvasElement提供了toDataURL方法，該方法返回一個包含被類型參數(shù)規(guī)定圖像表現(xiàn)格式的data URI。通過該方法我們就可以生成二維碼圖片并下載了。示例如下：
/*html*/
<div id="qrcode">div>
<a href="javascript:;" download="二維碼" id="down">下載二維碼</a>
/*js*/
var canvas = document.getElementsByTagName('canvas')[0];
var downImg = document.getElementById('down')
img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
二、圖片加水印
利用canvas的fillText和drawImage方法可以輕松實現(xiàn)給圖片加水印。示例如下：
/*html*/
<canvas id="canvas"></canvas>
/*js*/
var img = new Image(); // 創(chuàng)建img元素
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
img.src = 'myImage.png';
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.font="30px yahei"; //設(shè)置水印文字
ctx.fillText("大前端", 1100, 260)
}
今天暫時寫到這里，歡迎分享關(guān)于canvas的其他應(yīng)用。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
