HTML5-Leinwand. Meine Zeichnung ist nicht glatt. Ich habe alles versucht
var canvas;
var context;
var isDrawing = false;
window.onload = function()
{
\t canvas = document.getElementById("canvas");
\t context = canvas.getContext("2d");
\t canvas.width=window.innerWidth;
\t canvas.height=window.innerHeight;
\t canvas.addEventListener("mousemove", putPoint);
\t canvas.addEventListener("mousedown", engage);
\t canvas.addEventListener("mouseup", disengage);
\t canvas.addEventListener("mouseout", disengage);
\t context.lineWidth = 2*radius;
\t \t context.lineJoin = context.lineCap = 'round';
};
var radius=0.5;
var engage = function(e)
{
\t isDrawing = true;
\t putPoint(e)
}
var disengage = function()
{
\t isDrawing = false;
\t context.beginPath();
}
var putPoint=function (e)
{
\t if(isDrawing)
\t {
\t \t context.lineTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
\t \t context.stroke();
\t \t context.beginPath();
\t \t context.arc(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop, radius, 0, Math.PI*2);
\t \t context.fill();
\t \t context.beginPath();
\t \t context.moveTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
\t
\t }
}body
{
\t margin: 2px;;
}
canvas
{
\t border: 1px solid black;
\t display:block;
}<!DOCTYPE html>
<html lang="pl">
<head>
\t <meta charset="utf-8">
\t <title> Drawing app </title>
\t <link href="style.css" rel="stylesheet">
\t <script src="script2.js"> </script>
</head>
<body>
\t <canvas id="canvas" width="1900" height="1000"> Your browser doesn't support canvas. </canvas>
</body>
</html>Dies ist mein Code. Bitte versuche etwas zu zeichnen. Sie sollten viele Pixel sehen. Es sieht schrecklich aus. Ich würde gerne so aussehen: https://sketch.io/sketchpad/. Bitte stellen Sie dort 1px ein und überprüfen Sie es. Es ist eine schöne, glatte Linie ohne Pixel. Ich möchte es erreichen.
Hier ist schöne Zeichnung: http://codepen.io/kangax/pen/zofsp. Aber: - Jedes Mal, wenn Sie einen neuen Pfad zeichnen -> Leinwand wird gereinigt. Es wird durch die 26. Codezeile verursacht. - Wenn ich es lösche (ich meine 26. Zeile des Codes) Zeichnung bricht: c
Was ich ausprobiert habe? -schattierungen -Gradienten -ctx.translate (0,5,0,5); -bezier Kurve Und es funktioniert nicht.
Ich nehme an, dass schöne Linien, die ich mit diesem erhalten kann: ctx.clearRect (x1, y1, x2, y2).
Aber ich habe keine Ideen, wie es zu benutzen: c
Ich werde Zeichnung App erstellen, so muss ich glatte Linien.