HTML5 Javascript画笔
[英]HTML5 Javascript paint brush
问题描述
I need to create a opacity brush clean and smooth. 
我需要创建一个不透明的刷子干净，光滑。
This is one drawing line example what i need: 这是我需要的一个绘图线示例：
Second picture what i get: 我得到的第二张照片：
While i move cursor faster, i get little less circles in the drawing line 虽然我移动光标更快，但我在绘图线上得到的圆圈少了一些
var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.lineJoin = "round" ctx.strokeStyle = "#000000"; ctx.globalAlpha = "0.2"; ctx.lineWidth = 30; ctx.globalCompositeOperation = "source-over"; var isDrawing, lastPoint; el.onmousedown = function(e) { isDrawing = true; lastPoint = { x: e.clientX, y: e.clientY }; }; el.onmousemove = function(e) { if (!isDrawing) return; var currentPoint = { x: e.clientX, y: e.clientY }; ctx.beginPath(); ctx.moveTo(lastPoint.x, lastPoint.y); ctx.lineTo(currentPoint.x, currentPoint.y); ctx.closePath(); ctx.stroke(); lastPoint = currentPoint; }; el.onmouseup = function() { isDrawing = false; }; function clearit() { ctx.clearRect(0,0, 1000, 1000); }
canvas { border: 1px solid #ccc }
<canvas id="c" width="500" height="300"></canvas> <input type="button" id="clear-btn" value="Clear it" onclick="clearit()">
2 个解决方案
解决方案1
3 已采纳 2015-01-23 09:47:58
Your problem is that in mousemove you are starting and closing lots of paths, so the opacity of the line is overloading. 你的问题是，在mousemove中你开始和关闭许多路径，所以线的不透明度是重载。
If you add: 如果你添加：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(250,250);
ctx.lineTo(200,100);
ctx.stroke();
you can see that the effect is removed. 你可以看到效果被删除。
A partial solution (you can't see what you are drawing) is this: 部分解决方案（你看不到你在画什么）是这样的：
el.onmousedown = function(e) {
isDrawing = true;
lastPoint = { x: e.clientX, y: e.clientY };
ctx.beginPath();
ctx.moveTo(lastPoint.x, lastPoint.y);
};
el.onmousemove = function(e) {
if (!isDrawing) return;
var currentPoint = { x: e.clientX, y: e.clientY };
ctx.lineTo(currentPoint.x, currentPoint.y);
lastPoint = currentPoint;
};
el.onmouseup = function() {
isDrawing = false;
ctx.closePath();
ctx.stroke();
};
Now we begin the path with mousedown, 'draw' the path in mousemove, and stroke the path with mouseup. 现在我们用mousedown开始路径，在mousemove中“绘制”路径，然后用mouseup描边路径。 I'm not sure about the 'closePath()' effect, but the inner circles disappear. 我不确定'closePath（）'效果，但内圈消失了。
解决方案2
0 2015-02-28 23:17:24
There is also a neat work around using two canvases: 使用两幅画布还有一个很好的工作：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border:1px solid #c3c3c3;
}
</style>
</head>
<body>
<canvas id="cv1" width="400" height="300">
</canvas>
<canvas id="cv2" width="400" height="300">
</canvas>
<hr>
<button onclick='merge();'>Merge</button>
<script>
var el1 = document.getElementById('cv1');
var el2 = document.getElementById('cv2');
var ctx1 = el1.getContext('2d');
var ctx2 = el2.getContext('2d');
ctx1.lineJoin = "round"
ctx1.strokeStyle = "#00FF00";
ctx1.globalAlpha = "0.2";
ctx1.lineWidth = 30;
ctx1.globalCompositeOperation = "source-over";
ctx2.globalCompositeOperation = "source-over";
var isDrawing, lastPoint;
el1.onmousedown = function(e) {
isDrawing = true;
lastPoint = { x: e.clientX, y: e.clientY };
};
el1.onmousemove = function(e) {
if (!isDrawing) return;
var currentPoint = { x: e.clientX, y: e.clientY };
ctx1.beginPath();
ctx1.moveTo(lastPoint.x, lastPoint.y);
ctx1.lineTo(currentPoint.x, currentPoint.y);
ctx1.closePath();
ctx1.stroke();
lastPoint = currentPoint;
};
el1.onmouseup = function() {
isDrawing = false;
};
function merge() {
ctx2.putImageData(ctx1.getImageData(0,0,400,300),0,0);
}
</script>
</body>
</html>
This allows you to draw on one canvas, but if you don't like what you have done, you can reverse it. 这允许你在一个画布上绘制，但如果你不喜欢你所做的，你可以反转它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.