HTML5帆布35x35 pixelpaint

我想要一個35 x 35像素的繪畫程序在我的網站上。我使用了不同的東西，但它不適用於我。HTML5帆布35x35 pixelpaint

該腳本必須只有黑色或顏色選擇器應該很好.. 和垂直和水平像素寬度/高度爲35像素。

如果你能幫助我，你是我的英雄

問候帕斯卡爾

2016-07-09 Pascal H

人？：D .. –

您要求我們爲您設計和編寫一個繪畫應用程序...這太寬泛了，不能問我們！你應該嘗試自己編碼。 **提示：**創建一個寬度爲350和高度爲350的畫布（這是畫布元素的大小 - 與CSS不匹配！）。使用'context.scale（10,10）'將繪畫區域放大到用戶可以看到的大小。聽取點擊事件並用'context.fillRect（mouseX，mouseY，1,1）'繪製點擊的像素。完成後，創建另一個35x35像素的畫布。使用'context.drawImage（largerCanvas，0,0,350,350，0,0,35,35）' – markE

將較大的畫布內容繪製到較小的畫布上感謝您的幫助，我對畫布沒有經驗。我會嘗試你的建議.. –

這是我現在有。我不能fisish它，點擊的像素不會在正確的地方放置。他們相互重疊。像素場必須是35x35，而不是350x350

canvas.addEventListener("mousedown", getPosition, false); 
 
function onload(){ 
 
    var canvas = document.getElementById("badge"); 
 
    c = canvas.getContext("2d"); 
 
    c.scale(10,10); 
 
} 
 

 
function getPosition(event) 
 
{ 
 

 
    var x = event.x; 
 
    var y = event.y; 
 

 
    var canvas = document.getElementById("badge"); 
 

 
    x -= canvas.offsetLeft; 
 
    y -= canvas.offsetTop; 
 

 
    c.fillStyle = "red"; 
 
    c.fillRect(x/10, y/10, 1, 1); 
 

 
    document.getElementById("demo").innerHTML = "x:" + x + " y:" + y; 
 

 

 
}

#badge { 
 
background-image: url(http://www.sivd.nl/canvas/bg.png); 
 
cursor: crosshair; 
 
border: 1px solid black; 
 
}

<body onload="onload()"> 
 
<center> 
 
<br><br><h1>Badge editor</h1><br> 
 
<p id="demo">Klik op onderstaande veld om je badge te maken!</p><br> 
 
<canvas id="badge" onclick="getPosition(event)" width="350" height="350"> 
 
Download Chrome om canvas te gebruiken.. 
 
</canvas> 
 
<br> 
 
<button>Potlood</button> 
 
<button>Kleurenkiezer</button> 
 
<button>Gum</button> 
 
<br> 
 
</center> 
 
</body>

來源

2016-07-11 13:28:28

HTML5帆布35x35 pixelpaint

回答

相關問題