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
我打算创建绘图应用程序,所以我需要流畅的线条。
答案 0 :(得分:0)
鼠标数据总是很粗糙,有许多方法可以让它平滑。线条平滑的圣杯更适合,但我还没有弄清楚如何实时做到这一点。
接下来最好的事情是优化和平滑线条以适应appox。
不要再将答案写出来,请参阅以下anwser https://stackoverflow.com/a/33882382/3877726
它提供了一种设置优化和平滑的方法,从无(有时你想要颠簸和肿块)一直到超级平滑..