微信小程序,小程序论坛,weixin,微信小程序canvas绘制坐标图(2)_H5之家

canvas教程

微信小程序,小程序论坛,weixin,微信小程序canvas绘制坐标图(2)

字号+ 作者：H5之家来源：H5之家 2017-12-19 12:02 我要评论( )

function draw(data, ctx) { var width,height = 260; var newArr = new Array(); wx.getSystemInfo({ success: function (res) { width = res.windowWidth; } }) var ratioX = (width - 55) / data.length; var ra

function draw(data, ctx) {

var width,height = 260;

var newArr = new Array();

wx.getSystemInfo({

success: function (res) {

width = res.windowWidth;

}

})

var ratioX = (width - 55) / data.length;

var ratioY = parseInt((height - 45) / 5);

//求NUM的最大值

for (var i = 0; i < data.length; i++) {

newArr.push(data[i].num);

}

var maxY = Math.max.apply(Math, newArr);

var stepY = Math.ceil(maxY / 4);

// ------- 绘制坐标线 ------

ctx.beginPath();

for (var i = 0; i < 5; i++) {

ctx.save();

ctx.setStrokeStyle("#dde2e3");

ctx.setFillStyle("#848198");

ctx.setFontSize('8');

ctx.moveTo(15, 215 - i * ratioY);

ctx.lineTo(380, 215 - i * ratioY);

ctx.fillText(i * stepY, 0, 220 - i * ratioY);

ctx.stroke();

ctx.restore();

}

复制代码

微信小程序小程序社区小程序论坛小程序论坛 weixin 微信开发者微信开发者

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

『教程』微信小程序canvas辑合（教程+Demo+跳坑）

2017-12-14 15:34
在Canvas上画图intro详解-绘图-界面API-微信小程序API-微信小程序开

2017-12-04 16:11
微信小程序Canvas增强组件相关介绍、文档、教程

2017-10-30 09:35
微信小程序俱乐部 www.wxappclub.com

2017-09-18 08:17

网友点评

精彩导读

React + Canvas 像素风格取色器

C# 在PictureBox 中绘图防止闪烁的办法 Bluev

canvas基本画图

自定义控件之圆形统计图表

Canvas雪花飘飞，html5代码

热门资讯

关注我们

关注微信公众号，了解最新精彩内容