Question

我应该可以在图片上绘图并保存。我想知道是否有可能允许用户仅绘制地图（形状）？这是complate代码： http://codepen.io/anon/pen/VYOXRW

var ctx, color = '#FF0000';
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
    newCanvas();
}, 1000);
}, false);
 function newCanvas() {
document.getElementById("content").style.height = window.innerHeight + 100;
var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + (window.innerHeight + 50) + '"></canvas>';
document.getElementById("content").innerHTML = canvas;
ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = color;
ctx.lineWidth = 10;
var image = new Image();
image.src = 'http://4.bp.blogspot.com/-_laBnztzAG8/Ub7mDK4Z3qI/AAAAAAAABu4/LBPUeAVeJcc/s1600/CA+KATHMANDU+VALLEY_HU.png';
image.onload = function() {
    var canvas = document.getElementById("canvas");
    var iWidth = image.width / 3;
    var iHeight = image.height / 3;
    ctx.drawImage(image, (canvas.width - iWidth) / 2, (canvas.height - iHeight) / 2, iWidth, iHeight);
};
drawTouch();
drawMouse();
}
 function selectColor(el) {
color = window.getComputedStyle(el).color;
ctx.beginPath();
ctx.strokeStyle = color;
}
 var drawTouch = function() {
var start = function(e) {
    ctx.beginPath();
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY;
    ctx.moveTo(x, y);
};
var move = function(e) {
    e.preventDefault();
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY;
    ctx.lineTo(x, y);
    ctx.stroke();
};
document.getElementById("canvas").addEventListener("touchstart", start, false);
document.getElementById("canvas").addEventListener("touchmove", move, false);
 };
var drawMouse = function() {
var clicked = 0;
var start = function(e) {
    clicked = 1;
    ctx.beginPath();
    x = e.pageX;
    y = e.pageY;
    ctx.moveTo(x, y);
};
var move = function(e) {
    if (clicked) {
        x = e.pageX;
        y = e.pageY;
        ctx.lineTo(x, y);
        ctx.stroke();
    }
};
var stop = function(e) {
    clicked = 0;
};
document.getElementById("canvas").addEventListener("mousedown", start, false);
document.getElementById("canvas").addEventListener("mousemove", move, false);
document.addEventListener("mouseup", stop, false);
};
 function saveBtn() {
console.log(document.getElementById('canvas').toDataURL());
}

Answer 1

当您希望用户能够以非破坏性方式绘制图像时，您可以创建第二个画布并使用CSS定位将其放置在第一个画布的顶部。用户现在可以在上面的画布上自由绘制，而下面的画布不受影响，并且仍可通过任何alpha透明区域看到（顺便说一句，当你不打算在背景上进行任何画布操作时，你可以同样使用普通的<img>}。

如果您想将两个画布分成一个可以保存的图像，请创建一个新的离屏画布，并使用drawImage绘制两个画布（是的，drawImage可以使用<canvas>作为一个来源，就像它可以采取<img>）。然后，您可以使用canvas.toDataURL获取PNG或JPEG压缩和base64编码的画布内容字符串。然后，您可以随意存储该字符串。

在HTML5画布上绘制并保留更改

1 个答案: