我有一个简单的绘图画布,可以允许用户绘制,编辑,清除和保存该绘图。每当用户刷新其页面时,保存的图形将一直显示在屏幕上,直到并且除非用户删除该图像,否则我拥有此代码非常合适。
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>
我只想在画布上添加google Maps,以便用户可以在Google Maps上绘制而不是空白画布。所有其他功能保持不变。这是代码
最简单的方法是,只要使画布透明并将其放在包含Google静态地图的div元素上方即可。我正在使用的地图上没有标记,但是您可以制作一个标记。该代码段中的地图不会显示,因为您需要添加API密钥。另外,我禁用了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>