Question

var canvas;
var context;
var isDrawing = false;

window.onload = function() 
{
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");

	canvas.width=window.innerWidth;
	canvas.height=window.innerHeight;
	canvas.addEventListener("mousemove", putPoint);
	canvas.addEventListener("mousedown", engage);
	canvas.addEventListener("mouseup", disengage);
	canvas.addEventListener("mouseout", disengage);
	context.lineWidth = 2*radius;
		context.lineJoin = context.lineCap = 'round';
};
var radius=0.5;

var engage = function(e)
{
	isDrawing = true;
	putPoint(e)
}

var disengage = function()
{
	isDrawing = false;
	context.beginPath();
}

var putPoint=function (e)
{
	if(isDrawing)
	{
		context.lineTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
		context.stroke();
		context.beginPath();
		context.arc(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop, radius, 0, Math.PI*2);
		context.fill();
		context.beginPath();
		context.moveTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
	
	}

}

body
{
	margin: 2px;;
}
canvas
{
	border: 1px solid black;
	display:block;
}

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title> Drawing app </title>
	<link href="style.css" rel="stylesheet">
	<script src="script2.js"> </script>

</head>
<body>
	<canvas id="canvas" width="1900" height="1000"> Your browser doesn't support canvas. </canvas>
</body>
</html>

这是我的代码。请尝试画一些东西。你应该看到很多像素。看起来很糟糕。我想看起来像这样：https://sketch.io/sketchpad/。请设置1px并检查它。这是美丽，流畅的线条，没有像素。我想实现它。

这是很好的绘图：http://codepen.io/kangax/pen/zofsp。但： - 每次绘制新路径时 - ＆gt;帆布正在清洁。它是由第26行代码引起的。 - 当我删除它（我的意思是第26行代码）绘图时：c

我尝试过什么？ -shadows -gradients -ctx.translate（0.5,0.5）; - 贝塞尔曲线它不起作用。

我想我可以用这个获得漂亮的线条：ctx.clearRect（x1，y1，x2，y2）。

但我不知道如何使用它：c

我打算创建绘图应用程序，所以我需要流畅的线条。

Answer 1

鼠标数据总是很粗糙，有许多方法可以让它平滑。线条平滑的圣杯更适合，但我还没有弄清楚如何实时做到这一点。

接下来最好的事情是优化和平滑线条以适应appox。

不要再将答案写出来，请参阅以下anwser https://stackoverflow.com/a/33882382/3877726

它提供了一种设置优化和平滑的方法，从无（有时你想要颠簸和肿块）一直到超级平滑..

HTML5的画布。我的画不顺利。我已经尝试了一切

1 个答案: