web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
canvas
canvas点阵图
分类:
canvas
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
#### js ```html function goChart(cBox,dataArr,textArr){ // 声明所需变量 var canvas,ctx; // 图表属性 var cWidth, cHeight, cMargin, cSpace; var originX, originY; // 柱状图属性 var bMargin, tobalBars, bWidth, maxXValue, maxYValue, minXValue, minYValue; var totalNomber; var yAverage, minTrueYValue, maxTrueYValue; // 运动相关变量 var ctr, numctr, speed; //鼠标移动 var mousePosition = {}; // 创建canvas并获得canvas上下文 canvas = document.createElement("canvas"); if(canvas && canvas.getContext){ ctx = canvas.getContext("2d"); } canvas.innerHTML = "你的浏览器不支持HTML5 canvas"; cBox.appendChild(canvas); initChart(); // 图表初始化 drawLineLabelMarkers(); // 绘制图表轴、标签和标记 drawChartAnimate(); // 绘制柱状图的动画 //检测鼠标移动 var mouseTimer = null; canvas.addEventListener("mousemove",function(e){ e = e || window.event; if( e.offsetX || e.offsetX==0 ){ mousePosition.x = e.offsetX; mousePosition.y = e.offsetY; }else if( e.layerX || e.layerX==0 ){ mousePosition.x = e.layerX; mousePosition.y = e.layerY; } clearTimeout(mouseTimer); mouseTimer = setTimeout(function(){ ctx.clearRect(0,0,canvas.width, canvas.height); drawLineLabelMarkers(); drawChartAnimate(true); },10); }); //点击刷新图表 canvas.onclick = function(){ initChart(); // 图表初始化 drawLineLabelMarkers(); // 绘制图表轴、标签和标记 drawChartAnimate(); // 绘制折线图的动画 }; // 图表初始化 function initChart(){ // 图表信息 cMargin = 60; cSpace = 80; //将canvas扩大2倍,然后缩小,以适应高清屏幕 canvas.width = cBox.getAttribute("width")* 2 ; canvas.height = cBox.getAttribute("height")* 2; canvas.style.height = canvas.height/2 + "px"; canvas.style.width = canvas.width/2 + "px"; cHeight = canvas.height - cMargin*2 - cSpace; cWidth = canvas.width - cMargin*2 - cSpace; originX = cMargin + cSpace; originY = cMargin + cHeight; // 柱状图信息 bMargin = canvas.width/40; tobalBars = dataArr.length; bWidth = parseInt( cWidth/tobalBars - bMargin ); maxXValue = 0; maxYValue = 0; var xArr = []; var yArr = []; for(var i=0; i
0){ drawLine(originX+2, yMarker, originX+cWidth, yMarker); } } // 绘制 x var oneXVal = (maxXValue-minXValue)/totalNomber; ctx.textAlign = "center"; for(var i=0; i<=totalNomber; i++){ var markerVal = parseInt(i*oneXVal+minXValue); var xMarker = parseInt( originX+cWidth*(markerVal-minXValue)/(maxXValue-minXValue)); var yMarker = originY+30; ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字 if(i>0){ drawLine(xMarker, cMargin, xMarker, originY-2); } } // 绘制标题 y ctx.save(); ctx.rotate(-Math.PI/2); ctx.fillText(textArr[1], -canvas.height/2, cSpace-10); ctx.restore(); // 绘制标题 x ctx.fillText(textArr[0], originX+cWidth/2, originY+cSpace/2+30); }; //绘制动画图 function drawChartAnimate(mouseMove){ var ifTip = false; var tipArr = null; for(var i=0; i
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告