我们如何Html5画布绘图在HTML文件中写入

我想做一个拖放HTML UI，为此我搜索谷歌，我发现html5 DnD api和帆布这是用于绘制元素。但我不知道如何在HTML文件中保存画布图（只有画布元素）。我们如何Html5画布绘图在HTML文件中写入

2016-06-09 Satinder Singh

您可以使用canvas对象的toDataURL（）属性将画布内容保存在默认为PNG格式的DataURL中。

var canvas=document.getElementById("YourCanvasID"); 
var dataURL=canvas.toDataURL();

希望这会有所帮助。

来源

2016-06-09 11:47:41 Rahi

谢谢，我会尝试， –

var canvas; 
 
var ctx; 
 
var x = 75; 
 
var y = 50; 
 
var WIDTH = 400; 
 
var HEIGHT = 300; 
 
var dragok = false; 
 

 
function rect(x,y,w,h) { 
 
ctx.beginPath(); 
 
ctx.rect(x,y,w,h); 
 
ctx.closePath(); 
 
ctx.fill(); 
 
} 
 

 
function clear() { 
 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
 
} 
 

 
function init() { 
 
canvas = document.getElementById("canvas"); 
 
ctx = canvas.getContext("2d"); 
 
return setInterval(draw, 20); 
 
} 
 

 
function draw() { 
 
clear(); 
 
ctx.fillStyle = "#000"; 
 
rect(0,0,WIDTH,HEIGHT); 
 
ctx.fillStyle = "#fff"; 
 
rect(x - 15, y - 15, 30, 30); 
 
} 
 

 
function myMove(e){ 
 
if (dragok){ 
 
    x = e.pageX - canvas.offsetLeft; 
 
    y = e.pageY - canvas.offsetTop; 
 
} 
 
} 
 

 
function myDown(e){ 
 
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
 
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
 
e.pageY > y -15 + canvas.offsetTop){ 
 
    x = e.pageX - canvas.offsetLeft; 
 
    y = e.pageY - canvas.offsetTop; 
 
    dragok = true; 
 
    canvas.onmousemove = myMove; 
 
} 
 
} 
 

 
function myUp(){ 
 
dragok = false; 
 
canvas.onmousemove = null; 
 
} 
 

 
init(); 
 
canvas.onmousedown = myDown; 
 
canvas.onmouseup = myUp;

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<title>Canvas Drag and Drop Test</title> 
 
</head> 
 
<body> 
 
<section> 
 

 
<div> 
 
<canvas id="canvas" width="400" height="300"> 
 
This text is displayed if your browser does not support HTML5 Canvas. 
 
</canvas> 
 
</div> 
 

 

 
</section> 
 
</body> 
 
</html>

来源

2016-06-09 11:54:17 Saika

我们可以复制一个HTML元素并将其放置在画布上，这可能吗？ –

虽然此代码可能会回答问题，但提供有关如何解决问题和/或为何解决问题的其他上下文可以提高答案的长期价值。 – cpburnz

我们如何Html5画布绘图在HTML文件中写入

回答

相关问题