<canvas>要素にスムーズなスケッチと描画を実装する
キャンバスで描画領域を作成しようとしています。曲線を描くときに線を滑らかに見せることに問題があります。また、アルゴリズムで線の太さを変更しています。サイズも大きくジャンプし、サイズが変更された場所を確認できるため、見栄えも悪くなります。私はこれを見つけました stackoverflow上のリンク が、これはネイティブのiPhoneアプリ用であり、理解できません。
これが私の現在のJSコードです。そして、これが実行中です jsFiddle
var xStart,
xEnd,
yStart,
yEnd,
Paint,
ctx;
$(document).ready(function (){
ctx = $('canvas')[0].getContext("2d");
ctx.strokeStyle = '#000';
ctx.lineJoin="round";
ctx.lineCap="round";
ctx.lineWidth = 1;
$('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
var orig = e.originalEvent;
if(e.type == 'mousedown'){
e.preventDefault(); e.stopPropagation();
xStart = e.clientX - $(this).offset().left;
yStart = e.clientY - $(this).offset().top;
xEnd = xStart;
yEnd = yStart;
Paint = true;
draw(e.type);
}else if(e.type == 'mousemove'){
if(Paint==true){
xEnd = e.clientX - $(this).offset().left;
yEnd = e.clientY - $(this).offset().top;
lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;
if(lineThickness > 10){
lineThickness = 10;
}
ctx.lineWidth = lineThickness;
draw(e.type);
}
}else if(e.type == 'mouseup'){
Paint = false;
}else if(e.type == 'mouseleave'){
Paint = false;
}else if(e.type == 'touchstart'){
if(orig.touches.length == 1){
e.preventDefault(); e.stopPropagation();
xStart = orig.changedTouches[0].pageX - $(this).offset().left;
yStart = orig.changedTouches[0].pageY - $(this).offset().top;
xEnd = xStart;
yEnd = yStart;
Paint = true;
draw(e.type);
}
}else if(e.type == 'touchmove'){
if(orig.touches.length == 1){
if(Paint==true){
xEnd = orig.changedTouches[0].pageX - $(this).offset().left;
yEnd = orig.changedTouches[0].pageY - $(this).offset().top;
lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6;
if(lineThickness > 10){
lineThickness = 10;
}
ctx.lineWidth = lineThickness;
draw(e.type);
}
}
}else if(e.type == 'touchend'){
Paint = false;
}
});
});
function draw(event){
if(event == 'mousedown'){
ctx.beginPath();
ctx.moveTo(xStart, yStart);
ctx.lineTo(xEnd, yEnd);
ctx.stroke();
}else if(event == 'mousemove'){
ctx.beginPath();
ctx.moveTo(xStart, yStart);
ctx.lineTo(xEnd, yEnd);
ctx.stroke();
}else if(event == 'touchstart'){
ctx.beginPath();
ctx.moveTo(xStart, yStart);
ctx.lineTo(xEnd, yEnd);
ctx.stroke();
}else if(event == 'touchmove'){
ctx.beginPath();
ctx.moveTo(xStart, yStart);
ctx.lineTo(xEnd, yEnd);
ctx.stroke();
}
xStart = xEnd;
yStart = yEnd;
}
よろしくお願いします。
これを描いてみると今はこんな感じです。 
...そしてこれは私が達成したいものです：
私はしばらく前にこのようなものを作り、それをjqueryプラグインに変えました。私がより詳細な回答を投稿し、私のアーカイブから簡略化されたjqueryバージョンを掘り出す場合は、こちらをご覧ください。
[〜＃〜]編集[〜＃〜]
はい、昨日できませんでした。
元々、上記のコードは、Doob氏の「ハーモニー」スケッチャーからここにフォークされました： http://mrdoob.com/projects/harmony/#ribbon
（これが最良の解決策だと思います）。でも、ちょっと壊して、自分の目的のために別のプロジェクトで作り直しました。私は自分のプラグインを少しハックして、ここでも少し簡単にしています：
変更したい唯一のことは、マウスダウン/マウスアップで動作するように変更することです。プラグインの下部にある設定を確認するのも簡単です。必要な効果を得るには、ブラシのサイズ、色、アルファ（rgba）など。
それが役に立てば幸い
このコードを見てください：
私がやっていることは、mouseDownでポイントの新しいリストを開始することです。その後、mousemoveごとにリストにポイントを追加します。十分な数のポイント（6程度）を取得したら、2次曲線の描画を開始します。曲線の制御点は、現在のポイントと次のポイントの平均です。
drawPointsは、この魔法を働かせるビットです：
function drawPoints(ctx, points) {
// draw a basic circle instead
if (points.length < 6) {
var b = points[0];
ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill();
return
}
ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
// draw a bunch of quadratics, using the average of two points as the control point
for (i = 1; i < points.length - 2; i++) {
var c = (points[i].x + points[i + 1].x) / 2,
d = (points[i].y + points[i + 1].y) / 2;
ctx.quadraticCurveTo(points[i].x, points[i].y, c, d)
}
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y), ctx.stroke()
}
@Alexが提供するクリックバージョンのコードに興味がある人のために、私は彼のスクリプトをここで書き直しました：
キャンバスでブラシを使用する必要があるようです。正確にどのようなブラシが必要かを言うのは難しいですが、すでにブラシ技術を実装している多くのJSライブラリがあります。
たとえば、このライブラリを見ましたか？
- Processing.js
- HTML5-Canvas-Brush-Sketch （ デモ および article の仕組み）
WebのLasoには、Mr。Doob Harmony プロジェクトに実装されている多くのブラシがあります。たとえば、github上の stringy または Harmony-Brushes プロジェクト。
このように塗りつぶされた曲線を囲むベジェ曲線のチェーンを使用してレンダリングを行うことを提案します。 （つまり、ctx.fillで終わります）やるべきことはまだたくさんありますが、これが役立つことを願っています。
ベジェ曲線用のニースデモアプリを採用
それをあなたのフィドルのフォークに追加しました http://jsfiddle.net/d3zFU/1/
コードは
/*
* Canvas curves example
*
* By Craig Buckler, http://Twitter.com/craigbuckler
* of OptimalWorks.net http://optimalworks.net/
* for SitePoint.com http://sitepoint.com/
*
* Refer to:
* http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
* http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
*
* This code can be used without restriction.
*/
（関数（） {
var canvas, ctx, code, point, style, drag = null, dPoint;
// define initial points
function Init(quadratic) {
point = {
p1: { x:100, y:250 },
p2: { x:400, y:250 }
};
if (quadratic) {
point.cp1 = { x: 250, y: 100 };
}
else {
point.cp1 = { x: 150, y: 100 };
point.cp2 = { x: 350, y: 100 };
}
// default styles
style = {
curve: { width: 6, color: "#333" },
cpline: { width: 1, color: "#C00" },
point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
}
// line style defaults
ctx.lineCap = "round";
ctx.lineJoin = "round";
// event handlers
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
DrawCanvas();
}
// draw canvas
function DrawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// control lines
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.fillStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
ctx.lineTo(point.cp1.x, point.cp1.y);
if (point.cp2) {
ctx.moveTo(point.p2.x, point.p2.y);
ctx.lineTo(point.cp2.x, point.cp2.y);
}
else {
ctx.lineTo(point.p2.x, point.p2.y);
}
ctx.stroke();
// curve
ctx.lineWidth = 1 ; //style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
if (point.cp2) {
ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
ctx.bezierCurveTo(point.cp2.x, point.cp2.y+12, point.cp1.x, point.cp1.y+12, point.p1.x, point.p1.y);
}
else {
ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
}
//ctx.stroke();
ctx.fill();
// control points
for (var p in point) {
ctx.lineWidth = style.point.width;
ctx.strokeStyle = style.point.color;
ctx.fillStyle = style.point.fill;
ctx.beginPath();
ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
ctx.fill();
ctx.stroke();
}
ShowCode();
}
// show canvas code
function ShowCode() {
if (code) {
code.firstChild.nodeValue =
"canvas = document.getElementById(\"canvas\");\n"+
"ctx = canvas.getContext(\"2d\")\n"+
"ctx.lineWidth = " + style.curve.width +
";\nctx.strokeStyle = \"" + style.curve.color +
"\";\nctx.beginPath();\n" +
"ctx.moveTo(" + point.p1.x + ", " + point.p1.y +");\n" +
(point.cp2 ?
"ctx.bezierCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.cp2.x+", "+point.cp2.y+", "+point.p2.x+", "+point.p2.y+");" :
"ctx.quadraticCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.p2.x+", "+point.p2.y+");"
) +
"\nctx.stroke();"
;
}
}
// start dragging
function DragStart(e) {
e = MousePos(e);
var dx, dy;
for (var p in point) {
dx = point[p].x - e.x;
dy = point[p].y - e.y;
if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
drag = p;
dPoint = e;
canvas.style.cursor = "move";
return;
}
}
}
// dragging
function Dragging(e) {
if (drag) {
e = MousePos(e);
point[drag].x += e.x - dPoint.x;
point[drag].y += e.y - dPoint.y;
dPoint = e;
DrawCanvas();
}
}
// end dragging
function DragEnd(e) {
drag = null;
canvas.style.cursor = "default";
DrawCanvas();
}
// event parser
function MousePos(event) {
event = (event ? event : window.event);
return {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
}
// start
canvas = document.getElementById("canvas");
code = document.getElementById("code");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
Init(canvas.className == "quadratic");
}
}）（）;