Content Table
2017-06-24

JS 绘制椭圆

Canvas 还没有提供直接绘制椭圆的功能，下面使用 bezierCurveTo() 来绘制椭圆。

圆也是使用 arc 来绘制的，在新版的 JS 中提供了 ellipse 来绘制椭圆，但是很多浏览器都还不支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style media="screen">
        canvas {
            border: 1px solid grey;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="300">Your browser does not support canvas.</canvas>

    <script>
        var canvas = $('#canvas').get(0);
        var ctx = canvas.getContext('2d');

        drawEllipse(ctx, 100, 100, 80, 120);
        drawEllipse(ctx, 200, 200, 200, 80);

        function drawEllipse(context, centerX, centerY, width, height) {
            context.beginPath();
            context.moveTo(centerX, centerY - height / 2);

            context.bezierCurveTo(
                centerX + width / 2, centerY - height / 2,
                centerX + width / 2, centerY + height / 2,
                centerX, centerY + height / 2
            );
            context.bezierCurveTo(
                centerX - width / 2, centerY + height / 2,
                centerX - width / 2, centerY - height / 2,
                centerX, centerY - height / 2
            );
            context.closePath();
            context.stroke();
        }
    </script>
</body>

</html>
2017-06-22

Canvas 像素数据处理

Canvas 的 context 调用 getImageData() 获取 canvas 中图片的像素数据，处理好后再调用 putImageData() 设置回 canvas。

1
2
3
4
5
6
7
8
var canvas = $('#canvas').get(0);
canvas.width = 500; // canvas 的实际宽度，默认是 300
canvas.height = 300;
var ctx = canvas.getContext('2d');

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取像素数据
grayscale(imageData); // 处理像素数据
ctx.putImageData(imageData, 0, 0); // 设置回 canvas

阅读全文

2017-06-16

测试 Java 生成 UUID 是否重复

本文的目的是为了测试 Java 的 UUID.randomUUID() 生成 UUID 是否重复，使用了 2 种方式:

  1. 多线程加 ConcurrentSkipListSet
  2. 多线程加 MySQL
    1. 多线程生成 UUID
    2. 保存 UUID 到文件
    3. 导入文件中的 UUID 到 MySQL
    4. 使用 GROUP BY 和 HAVING 查找重复的 UUID

结果：尝试了多次，生成 1 万个，10 万，100 万个 UUID 都没有发现重复的情况。

阅读全文

2017-06-15

MySQL 基于条件判断的数据插入

在编写程序时，我们经常会遇到一些基于条件判断的逻辑，比如：判断该条数据是否已经在数据库中存在，如果不存在，则插入。

技巧一：使用 ignore 关键字

如果是用主键 primary 或者唯一索引 unique 区分了记录的唯一性，避免重复插入记录可以使用 insert ignore into。

当插入数据时，如出现错误时，如重复数据，将不返回错误，只以警告形式返回。所以使用 ignore 请确保语句本身没有问题，否则也会被忽略掉。

阅读全文

2017-06-12

JDBC 和 MyBatis 性能比较

以下为 JDBC 和 MyBatis 的性能比较参考，MyBatis 的性能比 JDBC 大概慢三分之一，看上去相差挺大的，不过网络才是对效率影响最大的因素，局域网中有 200 多倍的影响，这么比较起来，MyBatis 和 JDBC 本身的效率差距可以忽略不计了。

测试 2 种情况 (每条记录有 7 个字段)

  • 向本机的数据库插入 66720 条记录
  • 向局域网中其他机器上的数据库插入 20000 条记录

在向局域网中其他机器上不停的插入数据时，2 台机器的 CPU 占用都很小，也就百分之几，因为大多数时候都在等待 IO。

阅读全文

2017-06-01

Vue 后台管理简单框架（二）- 多页

Vue 后台管理简单框架（一）中介绍了单页 SPA 的实现，但是实际系统中后台管理的功能很可能是需要多页的，例如要开发一个学习系统，学生和老师的管理功能完全不一样，如果非要把它们放在一起使用 SPA 的方式也可以，左边菜单栏根据角色是老师或则学生来动态显示也是可以的，但是这样会导致管理页的代码很多，功能都放在一起，开发的时候可能不够清晰，增加开发难度，如果把它们分开，使用多页的方式来实现，功能模块就很清晰了，不失为一个好办法。还有例如 PC 的网页和移动设备的网页实现不同，如果放在同一个页面就需要做各种判断来确定对应设备显示的内容也会把很简单的逻辑搞的很复杂，使用不同的页面的话就会很清晰了。

下面就来介绍把 vue-cli 创建的工程改造为支持多页：

  • 不同页面的文件放在不同的文件夹下

    每个页面都有自己的 router.js, index.js, index.vue, index.html

  • 修改 4 个配置文件：

    • webpack.base.conf.js: 修改入口文件 entry
    • webpack.dev.conf.js: 修改 HtmlWebpackPlugin
    • webpack.prod.conf.js: 修改 HtmlWebpackPlugin，删除 CommonsChunkPlugin
    • .eslintrc.js

阅读全文