この記事では、キャンバスリングカウントダウンコンポーネントのサンプルコードを紹介し、皆さんに共有します。詳細は次のとおりです。
効果は図 1 に示すとおりです。
キャンバスリングカウントダウンコンポーネントCanvas リング カウントダウンは、Canvas に基づいて実装されたカウントダウンであり、モバイル デバイスでの使用が推奨されます。
キャンバスリングカウントダウンダウンロードアドレス
1. 使用方法1.htmlコード
ID 属性には任意の名前を付けることができます
<canvas id=canvas></canvas>
2. process.js ファイルの導入
参照ページ
<script src=js/process.js></script>
3. 初期化パラメータ
インスタンス化するだけ
<script> window.onload = function () { let ctd = new Countdown() };</script> 2. 設定パラメータの説明次のパラメータは必須ではなく、特定のニーズに応じて構成できます。
window.onload = function () { let ctd = new Countdown(); ctd.init({ id: Canvas, // ID、キャンバスには ID 属性が必要です。 size: 130, // 円を描画するための最大サイズ、width = High borderWidth: 4, // 境界線の幅 borderColor: #fff, // 境界線の色 innerColor: #fff, // 一番外側の下の円の色スケジュールColor: #fff, //プログレスバーのアニメーションの色 fontColor: #fff, // フォントのカラーリングの色: #ffc720, // プログレスバーのリングの色 innerColor: #4e84e5, // 最も内側の円の背景色 fontSize: 50, time: 5 }); 3. サンプルコードhtml
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>タイトル</title> <style> body { 背景: #c2c1ce; } .container { 位置: 絶対左: 50%; 上: 50%; 変換: 幅: 130px; テキスト整列: </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script ><script> window.onload = function () { let ctd = new Countdown() };</script></body></html>js
/** * Tan Xi が 2018/3/15 に作成 */function Countdown() { // デフォルトのパラメータを設定します this.settings = { id: Canvas, // ID、Canvas には ID 属性が必要です size: 130, // 円を描画するための最大サイズ、幅 = 高さ borderWidth: 4, // 枠線の幅 borderColor: #fff, // 枠線の色 externalColor: #fff, //一番外側の一番下の円の色スケジュールColor: #fff, // プログレスバーのアニメーションの色 fontColor: #fff, // フォントのカラーリングColor: #ffc720, // プログレスバーのリングの色 innerColor: #4e84e5, // 最も内側の円の背景色 fontSize : 50,時間: 5 }}Countdown.prototype.init = function (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.ctx = this.obj.getContext(2d); this.settings, opt); this.countdown();};//背景色を描画 Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// プログレスバーアニメーションの背景を描画 Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / 描画カウントダウン Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.drawingBorder(this.settings.borderWidth);};// プログレスバーアニメーションを描画 Countdown.prototype.drawAnimate = function () { // 回転角度 let deg = Math.PI / 180; v = スケジュール * 360、startAng = -90、endAng = -90 + v; this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2 -3、startAng * 度、endAng * 度、false); this.ctx.fillStyle = this.settings.scheduleColor(); this.ctx.closePath();};// 境界線を描画します Countdown.prototype.drawingBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.drawingStyle = this.settings.borderColor;ストローク ();};// テキストを描画 Countdown.prototype.drawingText = function (text) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ Microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// 円を描く Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) { let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2 -border、startAng * 度、endAng * 度、false); this.ctx.fillStyle = fillColor(); this.ctx.closePath();};//プログレスバーアニメーション Countdown.prototype.countdown = function () { let oldTime = +new Date(); timer = setInterval(() => { let allMs = this.settings. time * 1000,// たとえば、30*1000=30 000ms currentTime = +new Date();ステップ サイズ = (現在の時刻 - 過去の時刻) / 合計秒数 スケジュール = (現在の時刻 - 古い時刻) / allMs; this.schedule = スケジュール; if (currentTime - oldTime >= allMs) { / / this.drawBackground(); this.drawAnimate(); this.drawInner(); clearInterval(timer); } }, 100);};// すべてを描画 Countdown.prototype.drawAll = function (schedule) { スケジュール = スケジュール >= 1 : スケジュール let text = parseInt(this.settings.time *) (1 - スケジュール)) + 1; // キャンバスをクリアします this.ctx.clearRect(0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawInner(); this.drawText(text);};//オブジェクトのコピー関数 extend(obj1,obj2){ for(let attr obj2){ obj1[attr] = obj2[attr] }} 4. 追加キャンバスの準備作業実際、canvas は他の HTML タグと同様、H5 タグにすぎません。
<canvas id=canvas></canvas>
最初にキャンバスの幅と高さを設定するのが最善であることに注意してください (幅と高さを設定しない場合、ブラウザはデフォルトでキャンバス サイズを幅 300 ピクセル、高さ 100 ピクセルに設定します)。 css を使用して設定する場合 (拡張機能がプルされます)、canvas タグ内に直接記述することをお勧めします。
<canvas id=canvas width=130 height=130></canvas>
Canvas 自体には描画機能はなく、すべての描画作業は js を通じて実装されます。通常、js で getElementById を使用して、操作対象のキャンバスを取得します (これは、キャンバスの ID を設定する必要があることを意味します)。
var c = document.getElementById(canvas);var ctx = c.getContext(2d);
1. ブラシを準備したら、実際には半径が異なる同心円の描画を開始できます。中心座標は (size/2、size/2) です。まず、半径が 2 の最大の白い背景の円を描きます。 。
let deg = Math.PI / 180; // beginPath() はパス描画エフェクトを分離し、以前のエフェクトが汚染されるのを防ぎます。 ctx.beginPath();// tcx.arc(円の中心度, 360 * 度, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
2. 2 番目の黄色の下円の描画を開始します。円の中心も (size/2, size/2) ですが、半径は白い下の円より 4 ピクセル小さいため、黄色の下円の半径は (size /2-4)
let deg = Math.PI / 180; // beginPath() はパス描画エフェクトを分離し、以前のエフェクトが汚染されるのを防ぎます。 ctx.beginPath();//tcx.arc(円の中心 0* 度、360 * 度、false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
3. 円の中心を (size/2,size/2)、半径を (size-23) として、青い内側の円の描画を開始し、それに 4 ピクセルの白い境界線を追加します。
let deg = Math.PI / 180; // beginPath() はパス描画エフェクトを分離し、以前のエフェクトが汚染されるのを防ぎます。 ctx.beginPath();// tcx.arc(円の中心 0* 度、360 * 度、false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();//白い境界線 ctx.lineWidth = 4;ctx.drawingStyle = #fff;ctx.drawing();
4. テキストを描画し、垂直方向の中央に配置します。
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (テキスト、キャンバスを基準とした X 座標、キャンバスを基準とした Y 座標) ctx.fillText(30, size / 2) 、サイズ / 2);
5. アニメーションを作成するにはどうすればよいですか?実際には、白い円を描くプロセスでもあり、黄色のプログレスバーをゆっくりと覆い、最初に白い円を描きます。このとき、青い円は白いアニメーションの円で覆われます。 、最後の青い円が描画されます。
let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(円の中心 X、円の中心 Y、半径、開始角度、終了角度、時計回りと反時計回り);ctx.arc(size / 2,サイズ / 2、サイズ / 2-4、0* 度、360 * 度、false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
6. 比較的単純なペイント プロセスが完了しました。次に、現在の最新時間と最も古い時間を使用して、合計時間を割ることで、キーとなるパーセンテージを取得する必要があります。数値と白いアニメーション円が描かれる角度の変更。
Countdown.prototype.countdown = function () { let oldTime = +new Date(); // 過去の時刻: 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // 現在の時刻: 1522136419393 let allMs = this.settings.time * 1000;//合計時間 (秒): 30*1000=30 000ms など。 if (currentTime - oldTime >= allMs) { // this.drawBackground(); this.drawProcess(); this.drawInner(0); // すべてのカウントダウンを描画します。 .prototype.drawAll = 関数 (スケジュール) { スケジュール = スケジュール >= 1 ? : スケジュール = parseInt(this.settings.time * (1) - スケジュール)) + 1; // キャンバスをクリアします this.ctx.clearRect(0, this.settings.size, this.settings.size); this.drawProcess(); ( ); this.drawInner(); this.drawInner(text);};// プログレスバーアニメーションを描画 Countdown.prototype.drawAnimate = function () { // 回転角度 let deg = Math.PI / 180; let v = スケジュール * 360, startAng = -90,//開始角度 endAng = -90 + v;//終了角度 this.ctx.beginPath(); .size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3、startAng * 度、endAng * 度、false); this.ctx.fillStyle = this.ctx.fill();} ;プロセス指向バージョン
/** * プログレスバーアニメーション*/ countdown: function () { this.getSystemInfo().then(v => { // アダプティブ let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; サイズ = parseInt(サイズ); サイズ = サイズ % 2 ? サイズ + 1 : サイズを指定します。 = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, スケジュール = (currentTime - sTime) / 時間; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // テキストを描画します this.setData({ スケジュール: 0 }) }, 100);描画 */ 描画: 関数 (スケジュール, val, サイズ) { サイズ = サイズ || スケジュール = 1 1 : スケジュール = parseInt(val - val * スケジュール); = サイズ / 2, 度 = Math.PI / 180; _ts.setData({ 幅: サイズ, 高さ: サイズ, スケジュール: テキスト + 1 });キャンバスをクリアします ctx.clearRect(0, 0, size, size) // 白い背景を描画します ctx.arc(r, r, r, 0 * deg, 360 * deg); = ' rgba(255,255,255,1)'; ctx.closePath(); //オレンジ色の描画 ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * 度, 360 * 度); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // 白い進行状況バーを描画します let v = スケジュール * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * 度, (-90 + v) * 度); (); ctx.fill(); // 中央の青 ctx.beginPath(); r - 12, 0 * 度, 360 * 度); ctx.fillStyle = 'rgba(90,140,220,1)'; // テキストを描画します。統合された描画 ctx.draw() },以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。