HTML5 Canvas绘制交互式交叉线

Canvas Crosshatch，线条会自动吸附（snap）到固定网格点。

h5, tool

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 7491
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {

// Console Log
    function cl($m) {
        console.log($m);
    }

// Utility Console Log
    var sp = ', ';
    var br = '<br>';

var first = true;
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

var x, y, oldX, oldY;

var fronte = false;
    var st = 40; // S-pessore T-rama : Distanza tra i buchi in cui far passare il filo

var story = [];

// Impostazione filo
    var filo = {
        w: 5,
        color: '#fff',
        cap: 'round',
        join: 'round',
        shColor: 'rgba(0,0,0,.4)',
        shBlur: 8,
        shOffX: 2,
        shOffY: 2,
        dash: [0]
    };
    var filoRetro = {
        w: 5,
        color: 'rgba(0,0,0,.07)',
        //dash : [5, 10] // Tratteggiato
        dash: [0]
    };

function setFiloFronte($context) {
        $context.strokeStyle = filo.color;
        $context.setLineDash(filo.dash);
        $context.lineWidth = filo.w;
    }

function setFiloRetro($context) {
        $context.strokeStyle = filoRetro.color;
        $context.setLineDash(filoRetro.dash);
        $context.lineWidth = filoRetro.w;
    }

function toggleFronteRetro($context) {
        if (fronte) {
            setFiloFronte($context);
        } else {
            setFiloRetro($context);
        }
    }

function initContext() {
        context.lineWidth = filo.w;
        context.lineCap = filo.cap;
        context.lineJoin = filo.join;
        context.strokeStyle = filo.color;
        context.shadowColor = filo.shColor;
        context.shadowBlur = filo.shBlur;
        context.shadowOffsetX = filo.shOffX;
        context.shadowOffsetY = filo.shOffY;
    }

function drawBG() {
        var imageObj = new Image();
        imageObj.onload = function() {
            var pattern = context.createPattern(imageObj, 'repeat');
            context.rect(0, 0, canvas.width, canvas.height);
            context.fillStyle = pattern;
            context.fill();
        };
        imageObj.src = 'img/foro.png';
    }

function log($t) {
        document.getElementById("log").innerHTML = $t;
    }

function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        first = true;
        fronte = false;
    }

function points() {

var oldX = story[story.length - 2][0];
        var newX = story[story.length - 1][0];
        var oldY = story[story.length - 2][1];
        var newY = story[story.length - 1][1];

var deltaX = Math.abs(oldX - newX);
        var deltaY = Math.abs(oldY - newY);

function good() {
            cl('good')
            $('#points').text('Well done, kiddo!').attr('class', 'ok');
            $('#avatar').attr('class', 'ok');
        }

function bad() {
            $('#points').text('Oh, not like that...').attr('class', 'no');
            $('#avatar').attr('class', 'no');
        }

if (fronte) {
            if (deltaX === st && deltaY === st) {
                good();
            } else {
                bad();
            }
        } else {
            if (deltaX === 0 && deltaY === st) {
                good();
            } else {
                bad();
            }
        }

}

/* Event assignments */

$('canvas').on('click', function(event) {

x = (Math.round(event.pageX / st)) * st;
        y = (Math.round(event.pageY / st)) * st;

story.push([x, y]);

// Primo click 
        if (first) {

first = false;

} else {
            context.beginPath();
            context.moveTo(oldX, oldY);
            context.lineTo(x, y);

// Inverte il verso del filo
            toggleFronteRetro(context);

// Disegna il tratto
            context.stroke();

// Calcola il punteggio
            points();
        }

// Update vars
        oldX = x;
        oldY = y;
        fronte = !fronte;
        //log(+ x + ', ' + y);

}).on('mousemove', function(event) {
        var x = (Math.round(event.pageX / st)) * st - 5;
        var y = (Math.round(event.pageY / st)) * st - 4;

$('#cursor').css({
            'left': x + 'px',
            'top': y + 'px'
        });
    });

$('#endPath').on('click', function(event) {
        first = true;
    });

$('.colors a').on('click', function(event) {
        filo.color = $(this).css('background-color')
        $('.colors a').removeClass('active');
        $(this).addClass('active');
    });

$('#reset').on('click', function(event) {
        clearCanvas();
    });

$('#replay').on('click', function(event) {

clearCanvas();

fronte = false;
        setFiloFronte(context);

for (i = 0; i < (story.length - 1); i++) {

context.beginPath();
            context.moveTo(story[i][0], story[i][1]);
            context.lineTo(story[i + 1][0], story[i + 1][1]);
            context.stroke();

toggleFronteRetro(context);
            fronte = !fronte;
        }

//setTimeout(function(){
        /*	for(i=1; i<story.length; i++) {
        		cl(story[1][0] + sp +  story[1][1]);
        		//context.lineTo(story[i][0], story[i][1]);
        }, 500);
        }*/

});

window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

function drawLine(myLine, contextFilo) {
        contextFilo.beginPath();
        contextFilo.moveTo(myLine.a[0], myLine.a[1]);
        contextFilo.quadraticCurveTo(myLine.a1[0], myLine.a1[1], myLine.b[0], myLine.b[1]);
        contextFilo.lineCap = filo.cap;
        contextFilo.lineJoin = filo.join;
        contextFilo.shadowColor = filo.shColor;
        contextFilo.shadowBlur = filo.shBlur;
        contextFilo.shadowOffsetX = filo.shOffX;
        contextFilo.shadowOffsetY = filo.shOffY;
        contextFilo.stroke();
    }

function animateLine(myRectangle, canvasFilo, contextFilo) {

var distX = Math.round((myLine.b[0] - myLine.a[0]) / 2);
        var distY = Math.round((myLine.b[1] + myLine.a[1]) / 2);

myLine.a[0] = x || myLine.a[0];
        myLine.a[1] = y || myLine.a[1];
        myLine.b[0] = mX || 0;
        myLine.b[1] = mY || 0;

// Punto intermedio
        myLine.a1[0] = myLine.a[0] + distX;
        myLine.a1[1] = distY + 500;

toggleFronteRetro(contextFilo);

// clear
        contextFilo.clearRect(0, 0, canvasFilo.width, canvasFilo.height);

// Redraw
        drawLine(myLine, contextFilo);

// request new frame
        requestAnimFrame(function() {
            animateLine(myLine, canvasFilo, contextFilo);
        });
    }

var canvasFilo = document.getElementById('filo');
    var contextFilo = canvasFilo.getContext('2d');

var myLine = {
        a: [161, 201],
        a1: [150, 150],
        b: [mX, mY]
    };

var mX, mY;

$('canvas').on('mousemove', function(ev) {
        mX = ev.pageX;
        mY = ev.pageY;
        $('.l2').html(mX + ', ' + mY + '<br>' + myLine.a + ', ' + myLine.a1 + ', ' + myLine.b);
    });

//drawRectangle(myRectangle, contextFilo);

$(function() {

//drawLine(myLine, contextFilo);
        animateLine(myLine, canvasFilo, contextFilo);

});

// wait one second before starting animation
    /*setTimeout(function () {
        var startTime = (new Date()).getTime();
            
        //animate(myRectangle, canvasFilo, contextFilo, startTime);
        animateLine(myLine, canvasFilo, contextFilo, startTime);
    }, 1000);*/

initContext();

});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Rubik);
body {
    margin: 0px;
    padding: 0px;
    width: 800px;
    font-family: 'Rubik', Arial;
}
/* Controls */

.controls {
    position: fixed;
    z-index: 30;
    top: 0;
    padding: 20px;
}
.colors a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .5);
    border: 3px solid #e2e2e2;
}
.white {
    background-color: #fff;
}
.black {
    background-color: #000;
}
.red {
    background-color: #f00;
}
.yellow {
    background-color: #ff0;
}
.blue {
    background-color: #00f;
}
.colors .active {
    border: 3px solid yellow;
}
button {
    font-family: 'Rubik', Arial;
}
#cursor {
    border: 3px solid yellow;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 120px;
    left: 40px;
    z-index: 30;
    border-radius: 10px;
    pointer-events: none;
}
#info {
    position: fixed;
    bottom: 0;
    z-index: 30;
    width: 100%;
}
#info p {
    background-color: rgba(255, 255, 255, 0.3);
    width: 294px;
    margin-left: 130px;
    padding: 20px;
    border-radius: 10px;
    margin-top: 6px;
}
#guida {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    border: 1px solid #AAA;
    display: block;
    position: fixed;
    bottom: 10px;
    left: 10px;
}
#disegno {
    position: absolute;
    z-index: 10;
    top: 82px;
    left: 161px;
    opacity: 0.3;
}
#log {
    position: absolute;
    top: 0;
    right: 0;
    background: #e0e0e0;
    padding: 20px;
    z-index: 30;
    display: none;
}
#opponent {
    position: absolute;
    width: 800px;
}
#avatar {
    background: url('/assets/coolgirl.jpg') no-repeat 0 -220px;
    position: absolute;
    top: 12px;
    left: 675px;
    z-index: 40;
    width: 110px;
    height: 110px;
    border-radius: 55px;
}
#avatar.ok {
    background-position: 0px 0px;
}
#avatar.no {
    background-position: 0px -110px;
}
canvas {
    position: absolute;
    z-index: 20;
}
#filo {
    z-index: 22;
    pointer-events: none;
}
#points {
    position: absolute;
    right: 150px;
    top: 45px;
    font-size: 16px;
    z-index: 20;
    background: white;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0px 1px 3px #999;
    text-align: right;
}
#points.ok {
    color: green;
}
#points.no {
    color: red;
}
#bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: .8;
    background: url('https://cdn.pbrd.co/images/YfBgLnB.png') #e0e0e0 -1px -1px;
}
button {
    padding: 7px;
    border-radius: 4px;
    font-family: 'Raleway', arial;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
}
/* Animazione punteggio */
/*
http://www.dreamstime.com/splashpage-colldet12439
*/

HTML

Canvas Crosshatch，线条会自动吸附（snap）到固定网格点。

h5, tool

编辑器支持Emmet

快捷键

Canvas Crosshatch，线条会自动吸附（snap）到固定网格点。

h5, tool

HTML5 Canvas使用分形算法实现交互式花形图案自动绘制

HTML5 Canvas交互式三维地图编辑器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：