web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
canvas
h5 canvas蜘蛛图的画法
分类:
canvas
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
```javascript function goChart(cBox,dataArr,textArr,ifFill){ // 声明所需变量 var canvas,ctx; // 图表属性 var cWidth, cHeight, cMargin, cSpace; var originX, originY; // 主图属性 var tobalDots, maxValue; var lineStartAngle,radius; var colorArr; // 运动相关变量 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(); // 图表初始化 // 图表初始化 function initChart(){ // 图表信息 cMargin = 60; cSpace = 60; //将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*2; //cWidth = canvas.width - cMargin*2-cSpace*2; originX = canvas.width/2; originY = canvas.height/2; // 柱状图信息 tobalDots = textArr.length; var allArr = []; for(var i=0; i
originY){ ctx.textAlign="right"; ctx.fillText(text, x-textPadding, y+textPadding); }else if(y<=originY){ ctx.textAlign="left"; ctx.fillText(text, x+textPadding, y-textPadding); }else{ ctx.textAlign="left"; ctx.fillText(text, x+textPadding, y+textPadding); } }; drawChartAnimate(); // 绘制动画 //绘制动画 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写省市区三级联动效果
广告
广告