所以我今天在使用 Canvas 并创建了一个小脚本，当用户单击屏幕时，它会放置一个按钮图形。然而，它有一个奇怪的故障:在初次单击时，线条显示为深灰色，在接下来的单击时变为纯黑色。
有谁知道为什么会这样吗？
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="paint.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="paint.js"></script>
</head>
<body>
<div id="container">
<canvas id="canvas" width="500px" height="500px">Not supported.</canvas>
</div>
</body>
</html>
CSS:
html, body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#canvas {
border: 1px dotted black;
}
Javascript:
var paint = {
init: function() {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
$(document).on('click', function(e) {
var x = e.clientX,
y = e.clientY;
paint.draw_button(ctx, x, y, 2, 15);
});
},
draw_button: function(ctx, x, y, scale, rad) {
scale = scale * 25.5,
rad = scale - rad;
ctx.moveTo(x-rad, y-scale);
ctx.lineTo(x+rad,y-scale);
ctx.bezierCurveTo(x+rad, y-scale, x+scale,y-scale, x+scale, y-rad);
ctx.lineTo(x+scale,y+rad);
ctx.bezierCurveTo(x+scale,y+rad, x+scale, y+scale, x+rad, y+scale);
ctx.lineTo(x-rad,y+scale);
ctx.bezierCurveTo(x-rad, y+scale, x-scale, y+scale, x-scale, y+rad);
ctx.lineTo(x-scale,y-rad);
ctx.bezierCurveTo(x-scale,y-rad, x-scale, y-scale, x-rad, y-scale);
ctx.stroke();
},
};
$(function() {
paint.init();
});
最佳答案
您需要使用 beginPath() 方法，否则每次您对它们调用 lines() 时，这些行都会累积。 beginPath() 将重置路径对象:
draw_button: function(ctx, x, y, scale, rad) {
scale = scale * 25.5,
rad = scale - rad;
ctx.beginPath(); /// here
ctx.moveTo(x-rad, y-scale);
ctx.lineTo(x+rad,y-scale);
ctx.bezierCurveTo(x+rad, y-scale, x+scale,y-scale, x+scale, y-rad);
ctx.lineTo(x+scale,y+rad);
ctx.bezierCurveTo(x+scale,y+rad, x+scale, y+scale, x+rad, y+scale);
ctx.lineTo(x-rad,y+scale);
ctx.bezierCurveTo(x-rad, y+scale, x-scale, y+scale, x-scale, y+rad);
ctx.lineTo(x-scale,y-rad);
ctx.bezierCurveTo(x-scale,y-rad, x-scale, y-scale, x-rad, y-scale);
ctx.stroke();
}
关于javascript - Canvas 线条先变浅然后变暗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19329427/