vscode canvas 插件
canvas-snippets
绘制基本图形
<canvas id="canvas"></canvas>
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
// 开始绘制
context.beginPath();
// 绘制起始点 x,y 轴
context.moveTo(10, 10);
// 绘制线终点
context.lineTo(20, 10);
context.lineTo(20, 20);
// 设置颜色
context.strokeStyle = "#fc0";
// 设置线条粗细
context.lineWidth = 3;
// 设置线条端点样式 butt | round | square
context.lineCap = "butt";
// 设置两条相交线拐点的样式 miter | bevel | round
context.lineJoin = "miter";
// 设置闭合 - 连接起点和终点
context.closePath();
// 对路径进行描边 - 绘制线条
context.stroke();
context.beginPath();
// 绘制矩形 x, y 矩形左上角的坐标 x, y, width, height
context.rect(10, 30, 20, 20);
context.strokeStyle = "#cccccc";
context.stroke();
// 设置填充颜色 color | gradient | pattern
context.fillStyle = "#fc0";
// 填充
context.fill();
context.beginPath();
// 描边绘制矩形 x, y, width, height
context.strokeRect(10, 60, 20, 20);
// 填充绘制矩形
context.fillRect(40, 60, 20, 20);
context.beginPath();
// 绘制圆形 x, y,圆形坐标 radius,圆的半径 Math.PI / 180 * startAngle,起始弧度 Math.PI / 180 * endAngle,终止弧度 anticlockwise 是否逆时针 false
context.arc(30, 110, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
context.stroke();
context.beginPath();
// 绘制弧形 顺时针画
context.arc(80, 110, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);
context.lineWidth = 1;
context.stroke();
context.beginPath();
// 设置画笔起点 设置为圆心位置
context.moveTo(140, 110);
// 绘制扇形
context.arc(140, 110, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90);
context.closePath();
context.stroke();
context.beginPath();
// 绘制椭圆 x,y 椭圆圆心坐标 radiusX 椭圆长轴半径 radiusY 椭圆短轴半径 rotation 旋转角度（单位弧度）startAngle开始的角度（单位弧度） endAngle结束的角度（单位弧度）
context.ellipse(220, 110, 40, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
context.fill();
清空画布
context.clearRect(x, y, width, height);
绘制文字
<script>
context.beginPath();
// 设置文本样式 倾斜 加粗 大小 字体
context.font = "italic bold 12px Arial,sans-serif";
// context.font = "normal bold 36px Arial,sans-serif ";
// 设置文本对齐 start | left | center | right |end
context.textAlign = "center";
// 绘制文字 text, x, y, maxWidth
context.fillText(
"Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。",
300,
240
);
</script>
绘制多行文字换行省略号展示
context.measureText(‘’).width 计算文字的宽度
<script>
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
context.beginPath();
// 绘制文字
const content =
"Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。";
// 初始 x 轴位置
const initX = 100;
// 初始 y 轴位置
const initY = 100;
// 字体大小
const fontSize = 10;
// 行高
const lineHeight = 20;
// 绘制最大行数
const maxLine = 2;
// 最大宽度
const maxWidth = 200;
drawText(context, content, initX, initY, fontSize, lineHeight, maxLine, maxWidth);
function drawText(context, content, initX, initY, fontSize, lineHeight, maxLine, maxWidth) {
// 分割成字符串数组
let contentArray = content.split("");
// 存储绘制行的字符
let temp = "";
let row = [];
context.font = `${fontSize}px sans-serif`;
for (let i = 0; i < contentArray.length; i++) {
if (context.measureText(temp).width < maxWidth) {
// 如果绘制的文字宽度 < 文本最大宽度
temp += contentArray[i];
} else {
// 超出一行的最大宽度
// 这里添加i--是为了防止字符丢失
i--;
row.push(temp);
temp = "";
}
}
row.push(temp);
if (row.length > maxLine) {
row = row.slice(0, maxLine);
// 实际的行数 > 最大行数 展示 ...
const arr = row[maxLine - 1].split("");
arr.splice(arr.length - 1, 1, "...");
row[maxLine - 1] = arr.join("");
}
console.log(row);
for (let i = 0; i < row.length; i++) {
context.fillText(row[i], initX, lineHeight * i + initY, maxWidth);
}
}
</script>
签名案例
<div id="dv">签名</div>
<canvas id="canvas"></canvas>
<script>
const dv = document.querySelector("#dv");
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
// 绘制状态鼠标按下开始绘制松开结束绘制 默认 false
let flag = false;
canvas.addEventListener("mousedown", function (e) {
const { offsetX, offsetY } = e;
context.moveTo(offsetX, offsetY);
flag = true;
});
canvas.addEventListener("mousemove", function (e) {
const { offsetX, offsetY } = e;
if (flag) {
context.lineTo(offsetX, offsetY);
context.stroke();
}
});
canvas.addEventListener("mouseup", function (e) {
flag = false;
});
</script>
监听屏幕方向
window.addEventListener("orientationchange", () => {
if (screen.orientation.angle !== 0) location.reload();
});
绘制图片
<div id="dv">生成图片</div>
<canvas id="canvas"></canvas>
<script>
const dv = document.querySelector("#dv");
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
dv.addEventListener("click", async () => {
try {
const base64 = await loadImg("./assets/auth/card_nation.png");
console.log("base64", base64);
} catch (error) {
console.log("error", error);
}
});
function loadImg(src) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const img = new Image();
img.src = src;
img.onload = function () {
context.drawImage(img, canvas.width / 2 - 350 / 2, canvas.height / 2 - 220 / 2, 350, 220);
const base64 = canvas.toDataURL("image/png");
resolve(base64);
};
}, 1000);
});
}
</script>
绘制圆形头像
以上绘制图片基础使用 clip() 裁切路径
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 60, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
context.clip();
const base64 = await loadImg("./assets/auth/card_nation.png");
canvas 生成图片
// canvas 填充颜色
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
picture.addEventListener("click", function () {
const base64Img = canvas.toDataURL("image/jpeg");
// const base64Img = canvas.toDataURL("image/png");
img.src = base64Img;
});
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
