HTML5 Canvas 实现K线图的示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

 /** * K-line - K线图渲染函数 * Date: 2019.12.18 Author: isnan */ const BLOCK_MARGIN = 2; //方块水平间距 const START_PRICE_INDEX = 'open_price'; //开始价格在数据组中的位置 const END_PRICE_INDEX = 'close'; //结束价格在数据组中的位置 const MIN_PRICE_INDEX = 'low'; //最小价格在数据组中的位置 const MAX_PRICE_INDEX = 'high'; //最大价格在数据组中的位置 const TIME_INDEX = 'time'; //时间在数据组中的位置 const LINE_WIDTH = 1; //1px 宽度 (中间线、x轴等) const BOTTOM_SPACE = 40; //底部空间 const TOP_SPACE = 20; //顶部空间 const RIGHT_SPACE = 60; //右侧空间 let _addEventListener, _removeEventListener, prefix = ''; //addEventListener 浏览器兼容 function RenderKLine (id, /*Optional*/options) { if (!id) return; options = options || {}; this.id = id; //canvas box id // detect event model if (window.addEventListener) { _addEventListener = "addEventListener"; _removeEventListener = "removeEventListener"; } else { _addEventListener = "attachEvent"; _removeEventListener = "detachEvent" prefix = "on"; } // options params this.sharpness = options.sharpness; // 清晰度 (正整数 太大可能会卡顿，取决于电脑配置 建议在2～5区间) this.blockWidth = options.blockWidth; // 方块的宽度 (最小为3,最大49 为了防止中间线出现位置偏差 设定为奇数,若为偶数则向下减1) this.buyColor = options.buyColor || '#F05452'; // color 涨 this.sellColor = options.sellColor || '#25C875'; // color 跌 this.fontColor = options.fontColor || '#666666'; //文字颜色 this.lineColor = options.lineColor || '#DDDDDD'; //参考线颜色 this.digitsPoint = options.digitsPoint || 2; //报价的digits (有几位小数) this.horizontalCells = options.horizontalCells || 5; //水平方向切割多少格子 (中间虚线数 = 5 - 1) this.crossLineStatus = options.crossLineStatus || true; //鼠标移动十字线显示状态 //basic params this.totalWidth = 0; //总宽度 this.movingRange = 0; //横向移动的距离 取正数值，使用时再加负号 this.minPrice = 9999999; this.maxPrice = 0; //绘制的所有数据中 最小/最大数据 用来绘制y轴 this.diffPrice = 0; //最大报价与最小报价的差值 this.perPricePixel = 0; //每一个单位报价占用多少像素 this.centerSpace = 0; //x轴到顶部的距离 绘图区域 this.xDateSpace = 6; //x轴上的时间绘制间隔多少组 this.fromSpaceNum = 0; //x轴上的时间绘制从第 (fromSpaceNum%xDateSpace) 组数据开始 this.dataArr = []; //数据 this.lastDataTimestamp = undefined; //历史报价中第一个时间戳, 用来和实时报价做比较画图 this.buyColorRGB = {r: 0, g: 0, b: 0}; this.sellColorRGB = {r: 0, g: 0, b: 0}; this.processParams(); this.init(); }

 /** * sharpness {number} 清晰度 * buyColor {string} color - 涨 * sellColor {string} color - 跌 * fontColor {string} 文字颜色 * lineColor {string} 参考线颜色 * blockWidth {number} 方块的宽度 * digitsPoint {number} 报价有几位小数 * horizontalCells {number} 水平方向切割几个格子 * crossLineStatus {boolean} 鼠标移动十字线显示状态 */

 RenderKLine.prototype.init = function () { let cBox = document.getElementById(this.id); // 创建canvas并获得canvas上下文 this.canvas = document.createElement("canvas"); if (this.canvas && this.canvas.getContext) { this.ctx = this.canvas.getContext("2d"); } this.canvas.innerHTML = '您的当前浏览器不支持HTML5 canvas'; cBox.appendChild(this.canvas); this.actualWidth = cBox.clientWidth; this.actualHeight = cBox.clientHeight; this.enlargeCanvas(); } // 因为绘制区域超出canvas区域，此方法也用来代替clearRect 清空画布的作用 RenderKLine.prototype.enlargeCanvas = function () { this.canvas.width = this.actualWidth * this.sharpness; this.canvas.height = this.actualHeight * this.sharpness; this.canvas.style.height = this.canvas.height / this.sharpness + 'px'; this.canvas.style.width = this.canvas.width / this.sharpness + 'px'; this.centerSpace = this.canvas.height - (BOTTOM_SPACE + TOP_SPACE) * this.sharpness; // 将canvas原点坐标转换到右上角 this.transformOrigin(); // base settings this.ctx.lineWidth = LINE_WIDTH*this.sharpness; this.ctx.font = `${12*this.sharpness}px Arial`; // 还原之前滚动的距离 this.ctx.translate(-this.movingRange * this.sharpness, 0); // console.log(this.movingRange); }

 // 切换坐标系走向 (原点在左上角 or 右上角) RenderKLine.prototype.transformOrigin = function () { this.ctx.translate(this.canvas.width, 0); this.ctx.scale(-1, 1); }

 //监听鼠标移动 RenderKLine.prototype.addMouseMove = function () { this.canvas[_addEventListener](prefix+"mousemove", mosueMoveEvent); this.canvas[_addEventListener](prefix+"mouseleave", e => { this.event = undefined; this.enlargeCanvas(); this.updateData(); }); const _this = this; function mosueMoveEvent (e) { if (!_this.dataArr.length) return; _this.event = e || event; _this.enlargeCanvas(); _this.updateData(); } } //拖拽事件 RenderKLine.prototype.addMouseDrag = function () { let pageX, moveX = 0; this.canvas[_addEventListener](prefix+'mousedown', e => { e = e || event; pageX = e.pageX; this.canvas[_addEventListener](prefix+'mousemove', dragMouseMoveEvent); }); this.canvas[_addEventListener](prefix+'mouseup', e => { this.canvas[_removeEventListener](prefix+'mousemove', dragMouseMoveEvent); }); this.canvas[_addEventListener](prefix+'mouseleave', e => { this.canvas[_removeEventListener](prefix+'mousemove', dragMouseMoveEvent); }); const _this = this; function dragMouseMoveEvent (e) { if (!_this.dataArr.length) return; e = e || event; moveX = e.pageX - pageX; pageX = e.pageX; _this.translateKLine(moveX); // console.log(moveX); } } //Mac双指行为 & 鼠标滚轮 RenderKLine.prototype.addMouseWheel = function () { addWheelListener(this.canvas, wheelEvent); const _this = this; function wheelEvent (e) { if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return; //没有固定方向，忽略 if (e.deltaX < 0) return _this.translateKLine(parseInt(-e.deltaX)); //向右 if (e.deltaX > 0) return _this.translateKLine(parseInt(-e.deltaX)); //向左 if (e.ctrlKey) { if (e.deltaY > 0) return _this.scaleKLine(-1); //向内 if (e.deltaY < 0) return _this.scaleKLine(1); //向外 } else { if (e.deltaY > 0) return _this.scaleKLine(1); //向上 if (e.deltaY < 0) return _this.scaleKLine(-1); //向下 } } }

 function drawCrossLine () { if (!this.crossLineStatus || !this.event) return; let cRect = this.canvas.getBoundingClientRect(); //layerX 有兼容性问题，使用clientX let x = this.canvas.width - (this.event.clientX - cRect.left - this.movingRange) * this.sharpness; let y = (this.event.clientY - cRect.top) * this.sharpness; // 在报价范围内画线 if (y < TOP_SPACE*this.sharpness || y > this.canvas.height - BOTTOM_SPACE * this.sharpness) return; this.drawDash(this.movingRange * this.sharpness, y, this.canvas.width+this.movingRange * this.sharpness, y, '#999999'); this.drawDash(x, TOP_SPACE*this.sharpness, x, this.canvas.height - BOTTOM_SPACE*this.sharpness, '#999999'); //报价 this.ctx.save(); this.ctx.translate(this.movingRange * this.sharpness, 0); // 填充文字时需要把canvas的转换还原回来，防止文字翻转变形 let str = (this.maxPrice - (y - TOP_SPACE * this.sharpness) / this.perPricePixel).toFixed(this.digitsPoint); this.transformOrigin(); this.ctx.translate(this.canvas.width - RIGHT_SPACE * this.sharpness, 0); this.drawRect(-3*this.sharpness, y-10*this.sharpness, this.ctx.measureText(str).width+6*this.sharpness, 20*this.sharpness, "#ccc"); this.drawText(str, 0, y, RIGHT_SPACE * this.sharpness) this.ctx.restore(); }

 /** * 缩放图表 * @param {int} scaleTimes 缩放倍数 * 正数为放大，负数为缩小，数值*2 代表蜡烛图width的变化度 * eg: 2 >> this.blockWidth + 2*2 * -3 >> this.blockWidth - 3*2 * 为了保证缩放的效果， * 应该以当前可视区域的中心为基准缩放 * 所以缩放前后两边的长度在总长度中所占比例应该一样 * 公式：(oldRange+0.5*canvasWidth)/oldTotalLen = (newRange+0.5*canvasWidth)/newTotalLen * diffRange = newRange - oldRange * = (oldRange*newTotalLen + 0.5*canvasWidth*newTotalLen - 0.5*canvasWidth*oldTotalLen)/oldTotalLen - oldRange */ RenderKLine.prototype.scaleKLine = function (scaleTimes) { if (!this.dataArr.length) return; let oldTotalLen = this.totalWidth; this.blockWidth += scaleTimes*2; this.processParams(); this.computeTotalWidth(); let newRange = (this.movingRange*this.sharpness*this.totalWidth+this.canvas.width/2*this.totalWidth-this.canvas.width/2*oldTotalLen)/oldTotalLen/this.sharpness; let diffRange = newRange - this.movingRange; // console.log(newRange, this.movingRange, diffRange); this.translateKLine(diffRange); } // 移动图表 RenderKLine.prototype.translateKLine = function (range) { if (!this.dataArr.length) return; this.movingRange += parseInt(range); let maxMovingRange = (this.totalWidth - this.canvas.width) / this.sharpness + this.blockWidth; if (this.totalWidth <= this.canvas.width || this.movingRange <= 0) { this.movingRange = 0; } else if (this.movingRange >= 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：html5利用canvas实现颜色容差抠图功能canvas像素点操作之视频绿幕抠图
                                                                
下一篇：鼠标滚轮事件和Mac触控板双指事件用HTML5实现鼠标滚轮事件放大缩小图片的功能