Canvas简单封装
这里做一个封装canvas的代码总结。
在做项目的时候可以直接复制这段代码引入js文件。非常的方便。
顺便解决了canvas显示模糊的问题。
/**
* 存放一些关于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);
}
