0
私は赤い誤ったマークを描こうとしていますが、私はアイデアを持っていません。HTMLキャンバス描画
私はここで
https://jsfiddle.net/avmxfz2d/
function drawCorrect(key) {
var start = 100;
var mid = 145;
var end = 250;
var width = 20;
var leftX = start;
var leftY = start;
var rightX = mid - (width/2.7);
var rightY = mid + (width/2.7);
var animationSpeed = 5;
var ctx = document.getElementById(key).getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'rgba(0, 150, 0, 1)';
var i;
for (i = start; i < mid; i++) {
var drawLeft = window.setTimeout(function() {
ctx.beginPath();
ctx.moveTo(start, start);
ctx.lineTo(leftX, leftY);
ctx.stroke();
leftX++;
leftY++;
}, 1 + (i * animationSpeed)/3);
}
for (i = mid; i < end; i++) {
var drawRight = window.setTimeout(function() {
ctx.beginPath();
ctx.moveTo(leftX, leftY);
ctx.lineTo(rightX, rightY);
ctx.stroke();
rightX++;
rightY--;
}, 1 + (i * animationSpeed)/3);
}
}
drawCorrect('canvas');
正しいチェックマークを描画するjsfiddle以下は、私はそれぞれの足はそれが動作別々に描かれた、これまでにhttps://jsfiddle.net/zj6L8y17/
function drawIncorrect(key) {
var width = 20;
var animationSpeed = 5;
var ctx = document.getElementById(key).getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'red';
var startx = 50;
var starty = 50;
var endx = 150;
var endy = 150;
var curx = startx;
var cury = starty;
//Draw left to right
ctx.beginPath();
for (var i = 50; i < 150; i++) {
var drawLeft = window.setTimeout(function() {
ctx.moveTo(startx, starty);
ctx.lineTo(curx++, cury++);
ctx.stroke();
}, 1 + (i * animationSpeed)/3);
}
ctx.closePath();
startx = 150;
starty = 50;
endx = 50;
endy = 150
curx = startx;
cury = starty;
//Draw right to left
ctx.beginPath();
for (var i = 50; i < 150; i++) {
var drawRight = window.setTimeout(function() {
ctx.moveTo(startx, starty);
ctx.lineTo(curx--, cury++);
ctx.stroke();
}, 1 + (i * animationSpeed)/3);
}
ctx.stroke();
}
drawIncorrect('canvas');
を試してみましたが、何で持っているが、 2つのアニメーションを結合すると失敗します。
すでに2つの増分対角線でチェックマークを描いています。 2つの対角線の位置を変えるだけでXを作成します。おそらく 'strokeStyle = 'red''を変更します。 – markE
私は試しましたが、https://jsfiddle.net/zj6L8y17/を見てください。私はそれぞれの脚を別々に描くと動作しますが、2つを組み合わせるとすぐに直線を描きます。 –
私はそれを得たと思います –