前期web浏览器上面canvas可以很支持vue页面，因为要用原生插件组件必须是nvue才能使用显示出来所以重构（真的巨坑），然后之前写的绘制功能canvas又不能生效了是因为nvue原生weex啥的原因导致直接方法无效我丢。
话不多说实现方式上效果：
思路：nvue + <web-view> + H5 Canvas
在 nvue 页面中放 <web-view src="/static/draw.html">
draw.html 用标准 HTML5 Canvas + JS 实现手指绘制
1️⃣ nvue 页面：pages/home/draw.nvue
<template>
<view class="page">
<web-view :src="webViewUrl" class="webview"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
// H5 文件路径，放在 /static/draw.html
webViewUrl: '/static/draw.html'
}
}
}
</script>
<style scoped>
.page {
flex: 1;
}
.webview {
flex: 1;
}
</style>2️⃣ H5 页面：static/draw.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手指画笔</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #111;
overflow: hidden;
}
#canvas {
display: block;
background: #fff;
touch-action: none; /* 防止滚动 */
}
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}
button {
margin-right: 10px;
padding: 5px 10px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
<button id="clearBtn">清空</button>
<button id="logBtn">打印坐标</button>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 全屏自适应
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
let drawing = false;
let lastX = 0;
let lastY = 0;
let points = []; // 存储轨迹坐标
canvas.addEventListener('touchstart', (e) => {
drawing = true;
const touch = e.touches[0];
lastX = touch.clientX;
lastY = touch.clientY;
points.push({x: lastX, y: lastY});
});
canvas.addEventListener('touchmove', (e) => {
if (!drawing) return;
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
points.push({x, y});
});
canvas.addEventListener('touchend', () => {
drawing = false;
});
// 清空按钮
document.getElementById('clearBtn').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
points = [];
});
// 打印轨迹坐标
document.getElementById('logBtn').addEventListener('click', () => {
console.log('轨迹坐标:', points);
alert('已打印到控制台');
});
</script>
</body>
</html>