0
我想繪製一個紅色的不正確的標記,但我不知道從哪裏開始任何人都可以幫助我創建一個。HTML畫布繪圖
我有以下的jsfiddle得出正確對號
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');
這裏是我到目前爲止已經試過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');
seperately繪製每條腿它的工作原理,但如果我結合這兩個動畫,它只是失敗
您已經成功繪製了一個帶有2條增量對角線的複選標記。簡單地通過重新定位2條對角線來製作一個X--也許可以改變'strokeStyle ='red''。 – markE
我試過了,但看看https://jsfiddle.net/zj6L8y17/,如果我單獨繪製每條腿的效果,但只要我將它們合併,然後繪製一條直線 –
哈哈好吧,我認爲我知道了 –