昨日は、HTML5 Canvas を利用して描画される QR コードを生成するプラグイン QRCode.js を紹介しました。さて、今日の主役はキャンバス、つまりキャンバスの実用化です。
1. QRコードをダウンロードHTMLCanvasElement は、type パラメーターで指定された画像表現形式を含むデータ URI を返す toDataURL メソッドを提供します。この方法により、QR コード画像を生成してダウンロードできます。例は次のとおりです。
/*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>QR コードをダウンロード</a>/*js*/var Canvas = document.getElementsByTagName(' Canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png') 2. 画像に透かしを追加しますCanvas の fillText メソッドとdrawImage メソッドを使用すると、画像に透かしを簡単に追加できます。例は次のとおりです。
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image() // 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; //ウォーターマークテキストを設定 ctx.fillText(large フロントエンド, 1100, 260)}今日はここまでです。キャンバスの他のアプリケーションについてもお気軽に共有してください。これが皆さんの学習に役立つことを願っています。また、皆さんが VeVb Wulin Network をサポートしてくれることを願っています。