時間刻度軸，支持滑動和點擊刻度軸，先放一張效果圖。

實現原理其實很簡單，就是在canvas上畫圖，然后支持點擊拖動效果，主要代碼如下：

一，JS實現

1，定義TimeScaleChart類，定義內部變量組options，以及注冊事件，執行回調函數返回當前刻度值。

function TimeScaleChart(canvas, options) {this.canvas = canvas;this.options = optionsthis.ctx = canvas.getContext("2d");this.inited = false;this.touchPoint;this.value;this.canTouch = true;this.options.chooseIndex = options.chooseIndex * 2 - 1;//生成x軸刻度點數組this.scaleXpointArr = new Array();this.perStep = this.canvas.width / 24;for (var i = 0; i < 23; i++) {this.scaleXpointArr.push((i + 1) * this.perStep);}//注冊touchend事件，用于監測點擊事件var _this = this;this.canvas.addEventListener('touchend', function(eve) {var tempLength = 100000;var tempIndex = 0;var selectX = eve.changedTouches[0].clientX;for (var i = 0; i < _this.scaleXpointArr.length; i++) {var tmpValue = Math.abs(_this.scaleXpointArr[i] - selectX * diviceRatio);if (tmpValue <= tempLength) {tempLength = tmpValue;tempIndex = i;}}options.chooseIndex = tempIndex + 1;_this.update(options);_this.options.callback.call((tempIndex + 1 + 1) / 2);});//注冊touchmove事件，用于監測滑動事件this.canvas.addEventListener('touchmove', function(evt) {var tempLength = 100000;var tempIndex = 0;var selectX = evt.changedTouches[0].clientX;for (var i = 0; i < _this.scaleXpointArr.length; i++) {var tmpValue = Math.abs(_this.scaleXpointArr[i] - selectX * diviceRatio);if (tmpValue <= tempLength) {tempLength = tmpValue;tempIndex = i;}}options.chooseIndex = tempIndex + 1;_this.update(options);}); }

2，定義init()方法，用于初始化操作

TimeScaleChart.prototype.init = function() {var _this = this;_this.draw();this.inited = true; }

3，定義update()方法，用于點擊事件的更新操作

TimeScaleChart.prototype.update = function(options) {this.options = options;if (this.inited) {this.init();} }

4，定義draw()方法，用于在canvas上畫出圖形。

TimeScaleChart.prototype.draw = function() {var _this = this;//橫線距底部偏移量var offsetY = 13 * diviceRatio;this.ctx.save();this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);this.ctx.fillStyle = this.options.backgroundColor;this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);//橫線this.ctx.beginPath();this.ctx.strokeStyle = this.options.lineColors[0];this.ctx.lineWidth = 1 * diviceRatio;this.ctx.moveTo(0, this.canvas.height - offsetY);this.ctx.lineTo(this.canvas.width, this.canvas.height - offsetY)this.ctx.stroke();for (var i = 0; i < this.scaleXpointArr.length; i++) {//刻度this.ctx.beginPath();this.ctx.strokeStyle = this.options.lineColors[1];this.ctx.lineWidth = 1 * diviceRatio;//整數刻度var scaleY = 20 * diviceRatio;if (i % 2) {//半數刻度scaleY = 10 * diviceRatio;}this.ctx.moveTo(this.scaleXpointArr[i], this.canvas.height - offsetY - scaleY);this.ctx.lineTo(this.scaleXpointArr[i], this.canvas.height - offsetY)this.ctx.stroke();//文字if (i % 2 == 0) {this.ctx.fillStyle = this.options.labelColors[0];// this.ctx.font = this.options.fontSize + this.options.fontName;var fontSize1 = 8 * diviceRatio;//字向下偏移量var font_offsetY = fontSize1 + 1 * diviceRatio;this.ctx.font = fontSize1 + "px Arial";var text1 = i / 2 + 1;var textWidth1 = this.ctx.measureText(text1).width;var textHeight1 = this.ctx.measureText(text1).height;this.ctx.fillText(text1, this.scaleXpointArr[i] - textWidth1, (this.canvas.height - offsetY + font_offsetY));var fontSize2 = 6 * diviceRatio;this.ctx.font = fontSize2 + "px Arial";var text2 = "月";var textWidth2 = this.ctx.measureText(text2).width;this.ctx.fillText(text2, this.scaleXpointArr[i], (this.canvas.height - offsetY + font_offsetY));}}//大屏手機加載3倍圖if (diviceRatio > 2) {_this.options.chooseImg = _this.options.chooseImg.replace('@2x', '@3x');}//選中圖片preImage(_this.options.chooseImg, function() {//此處的this指img，實際月份等于_this.options.chooseIndex * 2 - 1_this.ctx.drawImage(this, (_this.options.chooseIndex) * _this.perStep - this.width / 2, _this.canvas.height - offsetY - this.height);}); }

5，另外，支持異步加載資源圖片，也既刻度線上的指針游標圖片，代碼如下：

function preImage(url, callback) { //圖片異步加載，加載完后再canvas中畫出var img = new Image(); //創建一個Image對象，實現圖片的預下載 img.src = url;if (img.complete) { // 如果圖片已經存在于瀏覽器緩存，直接調用回調函數 callback.call(img);return; // 直接返回，不用再處理onload事件 }img.onload = function() { //圖片下載完畢時異步調用callback函數。 callback.call(img); //將回調函數的this替換為Image對象 }; }
二，頁面中的使用

<!DOCTYPE html> <html><head><script type="text/javascript" src="animation.js"></script><script type="text/javascript">function timeScaleChartFun() {console.info("callback:" + this);}window.onload = function(){var timeScaleChartOptions = {};var canvas = document.getElementById("Chart");canvas.width = document.body.clientWidth;canvas.style.width = canvas.width + "px";canvas.style.height = canvas.height + "px";canvas.width = canvas.width * diviceRatio;canvas.height = canvas.height * diviceRatio;//背景顏色timeScaleChartOptions.backgroundColor = "#F3F3F3";//字顏色timeScaleChartOptions.labelColors = ["#d1445a"];//線顏色：1，橫線顏色；2，豎線顏色timeScaleChartOptions.lineColors = ["#d1445a", "#faaa6c"];//選中滑動圖標timeScaleChartOptions.chooseImg = "images/timeScaleChart@2x.png";//默認選中月份timeScaleChartOptions.chooseIndex = 9.5;//回調函數，當鼠標點擊和滑動使得其值更改時，會執行此函數，并把更改后的值返回給thistimeScaleChartOptions.callback = timeScaleChartFun;var chart = new TimeScaleChart(canvas, timeScaleChartOptions);chart.init();}</script></head><body><canvas id="Chart" width="" height="100"></canvas></body> </html>

以上就是全部代碼。

總結

以上是生活随笔為你收集整理的canvas上纯JS实现可滑动时间刻度轴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。