当前位置：首页 > JavaScript

js实现手绘地图

2026-02-03 02:11:19JavaScript

实现手绘地图的JavaScript方法

使用Canvas绘制基础地图

Canvas API适合绘制手绘风格的图形。通过设置线条的粗糙度和填充颜色，可以模拟手绘效果。

const canvas = document.getElementById('mapCanvas');
const ctx = canvas.getContext('2d');

// 设置手绘风格
ctx.lineWidth = 2;
ctx.strokeStyle = '#333';
ctx.fillStyle = '#f5f5f5';

// 绘制不规则多边形模拟陆地
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(200, 30);
ctx.lineTo(250, 80);
ctx.lineTo(180, 120);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();
ctx.stroke();

添加手写文字标注

通过设置字体和添加抖动效果，实现手写文字效果。

ctx.font = '18px "Comic Sans MS", cursive, sans-serif';
ctx.fillStyle = '#333';

// 添加文字抖动效果
for(let i=0; i<3; i++) {
    ctx.fillText('New York', 150 + Math.random()*2, 80 + Math.random()*2);
}

使用库简化开发

考虑使用专门的手绘风格库，如rough.js或handy.js，可以更轻松地实现手绘效果。

js实现手绘地图

import rough from 'roughjs';

const rc = rough.canvas(document.getElementById('mapCanvas'));
rc.rectangle(10, 10, 200, 200, {
    roughness: 2.3,
    fill: 'lightblue',
    stroke: 'darkblue'
});

实现交互功能

添加鼠标交互让地图更具动态感。

canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 高亮悬停区域
    if(isPointInLand(x, y)) {
        canvas.style.cursor = 'pointer';
    } else {
        canvas.style.cursor = 'default';
    }
});

添加装饰元素

绘制指南针、比例尺等装饰元素增强手绘感。

js实现手绘地图

// 绘制手绘风格指南针
ctx.beginPath();
ctx.arc(300, 50, 20, 0, Math.PI*2);
ctx.stroke();
ctx.fillText('N', 295, 35);
ctx.fillText('S', 295, 75);

使用SVG实现替代方案

SVG也可用于创建手绘风格地图，结合滤镜效果实现更丰富的视觉效果。

<svg width="500" height="300">
    <filter id="sketch">
        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3"/>
        <feDisplacementMap in="SourceGraphic" scale="3"/>
    </filter>

    <path d="M100,50 L200,30 L250,80 L180,120 Z" 
          fill="#f5f5f5" 
          stroke="#333" 
          stroke-width="2"
          filter="url(#sketch)"/>
</svg>