javascript - 使用canvas标签在html中添加谷歌地图

Question

我有一个简单的绘图 Canvas ，可以允许用户绘制、编辑、清除和保存该绘图。每当用户刷新其页面时，保存的绘图就会出现在屏幕上，直到并且除非用户删除该图像，否则我有这个代码，这完全没问题。

var canvas, ctx,
    brush = {
        x: 0,
        y: 0,
        color: '#000000',
        size: 10,
        down: false,
    },
    strokes = [],
    currentStroke = null;

function redraw () {
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.lineCap = 'round';
    for (var i = 0; i < strokes.length; i++) {
        var s =strokes[i];
        ctx.strokeStyle = s.color;
        ctx.lineWidth = s.size;
        ctx.beginPath();
        ctx.moveTo(s.points[0].x, s.points[0].y);
        for (var j = 0; j < s.points.length; j++){
            var p = s.points[j];
            ctx.lineTo(p.x, p.y);
        }
        ctx.stroke();
    }

}
function init () {
    canvas = $('#draw');
    canvas.attr({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    ctx = canvas[0].getContext('2d');


    function mouseEvent (e){
                brush.x = e.pageX;
        brush.y = e.pageY;

        currentStroke.points.push({
            x: brush.x,
            y: brush.y,

        });



        redraw();
    }
    canvas.mousedown(function (e){
        brush.down = true;

        currentStroke = {
            color: brush.color,
            size: brush.size,
            points: [],
        };
        strokes.push(currentStroke);

        mouseEvent(e);
    }) .mouseup(function (e) {
        brush.down = false;

        mouseEvent(e);

        currentStroke = null;
    }) .mousemove(function (e) {
        if (brush.down)
            mouseEvent(e);
    });

    // check if localstorage has an array of strokes saved 
    if(localStorage.getItem('canvas_strokes')) { 
       strokes =  JSON.parse(localStorage.getItem('canvas_strokes'));
      redraw();
    }

		$('#save-to-local-storage').click(function () {
    	localStorage.setItem('canvas_strokes', JSON.stringify(strokes)); 
    });
    $('#save-btn').click(function () {
        window.open(canvas[0].toDataURL());
    });
    $('#undo-btn').click(function (){
        strokes.pop();
        redraw();
    });
    $('#clear-btn').click(function (){
        strokes = [];
        redraw();
    });

    $('#color-picker').on('input', function () {
        brush.color = this.value;
    });
    $('#brush-size').on('input', function () {
        brush.size = this.value;
    });
    }
$(init); 

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<canvas id="draw"></canvas>

<button id="save-to-local-storage">
  Save 
</button>

<button id="clear-btn">
  clear
</button>
<button id="undo-btn">
  undo
</button>

我只想在 Canvas 上添加 Google map ，以便用户可以在 Google map 而不是空白 Canvas 上绘图。所有其他功能保持不变。这是代码

Answer 1

最简单的方法是让 Canvas 透明并将其放置在包含 google 静态 map 的 div 元素的顶部。我正在使用的 map 上没有标记，但您可以制作一个有标记的 map 。此代码段中的 map 不会显示，因为您需要添加 API key 。另外，我禁用了您的 localStorage，因为它在我的控制台中出现了 CORS 错误。

var canvas, ctx,
  brush = {
    x: 0,
    y: 0,
    color: '#000000',
    size: 10,
    down: false,
  },
  strokes = [],
  currentStroke = null;

function redraw() {
  ctx.clearRect(0, 0, canvas.width(), canvas.height());
  ctx.lineCap = 'round';
  for (var i = 0; i < strokes.length; i++) {
    var s = strokes[i];
    ctx.strokeStyle = s.color;
    ctx.lineWidth = s.size;
    ctx.beginPath();
    ctx.moveTo(s.points[0].x, s.points[0].y);
    for (var j = 0; j < s.points.length; j++) {
      var p = s.points[j];
      ctx.lineTo(p.x, p.y);
    }
    ctx.stroke();
  }

}

function init() {
  canvas = $('#draw');
  canvas.attr({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  ctx = canvas[0].getContext('2d');

  function mouseEvent(e) {
    brush.x = e.pageX;
    brush.y = e.pageY;

    currentStroke.points.push({
      x: brush.x,
      y: brush.y,

    });



    redraw();
  }
  canvas.mousedown(function(e) {
    brush.down = true;

    currentStroke = {
      color: brush.color,
      size: brush.size,
      points: [],
    };
    strokes.push(currentStroke);

    mouseEvent(e);
  }).mouseup(function(e) {
    brush.down = false;

    mouseEvent(e);

    currentStroke = null;
  }).mousemove(function(e) {
    if (brush.down)
      mouseEvent(e);
  });

  // check if localstorage has an array of strokes saved 
  //if (localStorage.getItem('canvas_strokes')) {
    //strokes = JSON.parse(localStorage.getItem('canvas_strokes'));
    //redraw();
  //}

  $('#save-to-local-storage').click(function() {
    localStorage.setItem('canvas_strokes', JSON.stringify(strokes));
  });
  $('#save-btn').click(function() {
    window.open(canvas[0].toDataURL());
  });
  $('#undo-btn').click(function() {
    strokes.pop();
    redraw();
  });
  $('#clear-btn').click(function() {
    strokes = [];
    redraw();
  });

  $('#color-picker').on('input', function() {
    brush.color = this.value;
  });
  $('#brush-size').on('input', function() {
    brush.size = this.value;
  });
}
$(init);

html,
body {
  height: 100%;
}

#draw {
  background-color: transparent;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 2;
}

#map {
  background-image: url("https://maps.googleapis.com/maps/api/staticmap?center=Fargo,ND&zoom=12&size=400x400&key=YOUR_API_KEY");
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div style="position:relative;height:100%;width:100%">
  <div id="map"></div>
  <canvas id="draw"></canvas>
</div>
<button id="save-to-local-storage">
  Save 
</button>
<button id="clear-btn">
  clear
</button>
<button id="undo-btn">
  undo
</button>