我們如何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文件中寫入

回答

相關問題