美文网首页前端开发程序员
用canvas绘制象素概率图,做数据新闻用得上的小工具

用canvas绘制象素概率图,做数据新闻用得上的小工具

作者: 毛三十 | 来源:发表于2017-03-10 18:46 被阅读0次

1.象素概率图

随着社会的进步,概率(百分数)与生活的关系也越来越紧密。足球比赛的概率、交通事故发生的概率、中彩票的概率、涨工资的概率等等不一而足。概率的百分数表示不够直观和形象,尤其是对小概率的表示。用象素概率图表示事件发生可能性,则会比较直观,易于理解。1000乘1000象素的图片即可表示百万级别的分数,象素概率图可以广泛的应用于数据新闻生产。

1.1双色球五等奖【10元】概率图(约为0.77%):

双色球五等奖概率图

1.2小编今年涨工资的概率图(约为0.01%):

涨工资概率图

从以上对比图中可以清晰的得出结论,还是买彩票比较靠谱。俺们涨工资的难度比得上巴萨6-1惊天逆转巴黎了吧。

2.象素概率图小工具

地址:象素概率图

象素概率图小工具操作页面

利用该小工具,你可以定义画布的大小,点个数,背景颜色,点颜色等变量。

因为性能等原因,对自定义变量做了一些限制,其中画布最大宽度5000px,最小宽度10px;画布最大高度5000px,最小高度10px;最多点数量50000个,最少点数量1个。

3.象素概率图程序

程序的基本思路是在X轴(画布宽),Y轴(画布高)上随机选点放到集合SET中,直到集合在点数达到指定个数为止,用canvas的fillRect方法绘制背景后,取集合中的(x,y)绘制一象素大小的点。

3.1页面程序:

象素概率图生成工具示例程序

3.2JS集合类(collection.js):

JS集合类

相关文章

  • 用canvas绘制象素概率图,做数据新闻用得上的小工具

    1.象素概率图 随着社会的进步,概率(百分数)与生活的关系也越来越紧密。足球比赛的概率、交通事故发生的概率、中彩票...

  • SVG绘制环图

    上篇<原生Canvas绘制饼图>介绍了如何使用Canvas来绘制环图,这篇用SVG标签来实现一下。 上面是完整效果...

  • Canvas 饼图与动效

    2016-06-24 用 Canvas 绘制一个饼图且实现动效。涉及:canvas 基本 api, request...

  • 图片的放大与缩小

    用canvas的drawImage绘制图像

  • android Paint基本用法

    一、绘制点 ◆ 用Canvas绘制位的的情况。在用Canvas绘制位图时,一般地,我们使用drawBitmap函数...

  • React中使用Canvas

    1. Canvas Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图...

  • Canvas绘制出一个时钟

    参考视频资料:Canvas 绘制时钟 最近复习到Canvas,先准备来段有趣的代码,用Canvas绘制出一个动态的...

  • gojs

    Gojs项目文档 简介: Gojs 用canvas 作图,一般用来绘制流程图,关系图,表示节点与节点之间的关系,节...

  • Canvas和SVG的区别是什么

    Canvas和SVG的区别是什么 分别的作用 Canvas是用笔刷进行2D绘图的 SVG是用标签绘制矢量图的 它们...

  • HTML5 Canvas 完整测试 - 弧形

    用 Canvas 绘制一条弧形或一个圆: 利用 Canvas 2D 的 arc 方法,可以绘制弧形,arc 弧形以...

网友评论

    本文标题:用canvas绘制象素概率图,做数据新闻用得上的小工具

    本文链接:https://www.haomeiwen.com/subject/xijogttx.html