Canvas简单封装

这里做一个封装canvas的代码总结。

在做项目的时候可以直接复制这段代码引入js文件。非常的方便。

顺便解决了canvas显示模糊的问题。

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/**
 * 存放一些关于canvas的封装工具，辅助函数
 * by littlefean
 */


// 获取设备像素比、canvas解决模糊问题用的

let PR = window.devicePixelRatio;


/**
 * canvas绘制标准化
 * @param n
 * @return {number}
 */
function standardize(n) {
    return Math.floor(n * PR);
}

/**
 * 在canvas上下文对象中画一条线，
 * 这条线是对齐了像素点的，之所以要对齐像素点就是要解决模糊的效果
 * 也就是传入的参数会默认取整
 * @param ctx
 * @param x1
 * @param y1
 * @param x2
 * @param y2
 * @param lineWidth
 * @param color
 * @param isDash
 */
function drawLine(ctx, x1, y1, x2, y2,
                  lineWidth = 1, color = "black", isDash = false) {
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = color;
    ctx.beginPath();
    if (isDash) {
        ctx.setLineDash([5, 5]);
    } else {
        ctx.setLineDash([]);
    }
    ctx.moveTo(standardize(x1), standardize(y1));
    ctx.lineTo(standardize(x2), standardize(y2));
    ctx.stroke();
}

/**
 * 画一个圆
 * @param ctx
 * @param x
 * @param y
 * @param r
 * @param fillColor 圆形填充颜色 格式是 rgba(xx,xx,xx) 这样的字符串
 * @param lineWidth 边缘线粗细
 * @param strokeColor 边框颜色
 */
function drawCircle(ctx, x, y, r, fillColor,
                    lineWidth = 1,
                    strokeColor = "black",) {
    ctx.lineWidth = lineWidth;
    // ctx.strokeStyle = strokeColor;
    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.arc(standardize(x), standardize(y), standardize(r), 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
}

/**
 * 画矩形边框
 * @param ctx 上下文对象
 * @param x 左上角顶点
 * @param y 左上角顶点
 * @param width 宽度
 * @param height 高度
 * @param color
 * @param lineWidth
 */
function drawRectStroke(ctx, x, y, width, height, color, lineWidth) {
    ctx.strokeStyle = color;
    ctx.lineWidth = standardize(lineWidth);
    ctx.lineJoin = "round";
    ctx.strokeRect(standardize(x), standardize(y), standardize(width), standardize(height));
}


/**
 * 画矩形填充
 * @param ctx
 * @param x 左上角顶点
 * @param y 左上角顶点
 * @param width
 * @param height
 * @param color
 */
function drawRectFill(ctx, x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(standardize(x), standardize(y), standardize(width), standardize(height));
}

/**
 * 写文字
 * @param ctx
 * @param content {String}
 * @param x {Number} px
 * @param y {Number} px
 * @param color 颜色字符串
 * @param fontSize {Number} px
 */
function writeFont(ctx, content, x, y, color = "black", fontSize = 20) {
    ctx.fillStyle = color;
    ctx.font = `${standardize(fontSize)}px "微软雅黑"`;           //设置字体
    // 默认中心对齐

    /**
     *   |
     * --+-----
     *   |
     *   也就是填入的坐标点是整个文字的中心坐标点
     */

    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.fillText(content, standardize(x), standardize(y));

}

/**
 * 安全、全面地更改canvas的大小
 * @param canvasElement
 * @param w
 * @param h
 */
function canvasResize(canvasElement, w, h) {
    canvasElement.width = w * PR;
    canvasElement.height = h * PR;
    canvasElement.style.width = `${w}px`;
    canvasElement.style.height = `${h}px`;
    // 上下文对象的绘制起始点稍微平移一丝丝
    canvasElement.getContext("2d").translate(0.5 * PR, 0.5 * PR);
}