HTML5 Canvas 35x35 pixelpaint

私のウェブサイトに35 x 35ピクセルのペインティングプログラムが必要です。私は別のものを使用していますが、それは私のために働きません。HTML5 Canvas 35x35 pixelpaint

スクリプトは黒のみである必要があります。カラーピッカーはいいはずです。縦横のピクセル幅/高さは35ピクセルです。

あなたはこれは私が今持っているものである私のヒーロー

よろしくパスカル

2016-07-09 Pascal H

誰かでなければなりませんか？：D .. –

あなたのためにペイントアプリをデザイン＆コードするようにお願いします。あなた自身でコーディングしてみるべきです。 **ヒント：** width = 350＆height = 350のキャンバスを作成します（これはキャンバスの要素サイズです - サイズはCSSではありません！）。ペイント領域をユーザがよく見ることができるサイズに拡大するには、 'context.scale（10,10）'を使用します。クリックイベントを聞き、クリックしたピクセルを 'context.fillRect（mouseX、mouseY、1,1）'でペイントします。完了したら、35x35pxの2番目のキャンバスを作成します。 '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

答えて

関連する問題