企业官网建设流程全解析

重庆网站搭建公司,建站之星多语言,wordpress使用人数,wordpress 修改文章作者前期web浏览器上面canvas可以很支持vue页面#xff0c;因为要用原生插件组件必须是nvue才能使用显示出来所以重构#xff08;真的巨坑#xff09;#xff0c;然后之前写的绘制功能canvas又不能生效了是因为nvue原生weex啥的原因导致直接方法无效我丢。话不多说实现方式上效…前期web浏览器上面canvas可以很支持vue页面因为要用原生插件组件必须是nvue才能使用显示出来所以重构真的巨坑然后之前写的绘制功能canvas又不能生效了是因为nvue原生weex啥的原因导致直接方法无效我丢。话不多说实现方式上效果思路nvue web-view H5 Canvas在 nvue 页面中放web-view src/static/draw.htmldraw.html 用标准 HTML5 Canvas JS 实现手指绘制1️⃣ nvue 页面pages/home/draw.nvuetemplate view classpage web-view :srcwebViewUrl classwebview/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; } /style2️⃣ H5 页面static/draw.html!DOCTYPE html html langen head meta charsetUTF-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 idcanvas/canvas div idcontrols button idclearBtn清空/button button idlogBtn打印坐标/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