HTML5用户笔画形状检测机器人

Trainable Shape Detector

html5, 人工智能

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = Snap('#svg-canvas');
var card = $('#svg-canvas');
var intro = $('.intro')
var trainedData = [];
var centerDot;
var drawBox;

var drawing = [];
var drawPath = canvas.path().attr({
  	fill: "none",
  	stroke: "#ff0000",
  	strokeWidth: 3,
	strokeDasharray: '5 5'
});

var canvasBox = canvas.node.getBoundingClientRect();

var TYPES = {
	heart: { type: 'heart', path:  Snap.select('#heart'), item: $('#heart')},
	house: { type: 'house', path:  Snap.select('#house'), item: $('#house')},
	moon: { type: 'moon', path:  Snap.select('#moon'), item: $('#moon')},
	star: { type: 'star', path:  Snap.select('#star'), item: $('#star')},
	zigzag: { type: 'zigzag', path:  Snap.select('#zigzag'), item: $('#zigzag')},
}

var keys = _.keys(TYPES);

init();
reset();
card.on('mousedown', startDrawing);

function train(type, path)
{
	if(!path) path = drawPath;
	trainedData.push({type: type, breakdown: getLineBreakdown(path)}); 
}

function updateDrawLine()
{
	drawPath.attr('d',"M" + drawing.join(' '))
}

function reset()
{
	for(var i = 0; i < keys.length; i++)
	{
		TYPES[keys[i]].path.attr({
			fill: '#ddd',
			stroke: "#00dd00",
			strokeWidth: 0
		})
	}
}

function startDrawing(e)
{
	intro.addClass('hidden');
	if(e.offsetY > 60)
	{
		reset();
	
		drawing = [e.offsetX + ',' + e.offsetY];
		card.on('mousemove', draw);
		card.on('mouseup', stopDrawing);
	}
}

function draw(e)
{
	drawing.push(e.offsetX + ',' + e.offsetY);
	updateDrawLine();
}

var xy = [];
	var x2 = [];
	var y2 = [];

for (var i = 0; i < shortestArrayLength; i++)
	{
		xy.push(x[i] * y[i]);
		x2.push(x[i] * x[i]);
		y2.push(y[i] * y[i]);
	}

var sum_x = 0;
	var sum_y = 0;
	var sum_xy = 0;
	var sum_x2 = 0;
	var sum_y2 = 0;

for (var i = 0; i < shortestArrayLength; i++)
	{
		sum_x += x[i];
		sum_y += y[i];
		sum_xy += xy[i];
		sum_x2 += x2[i];
		sum_y2 += y2[i];
	}

var step1 = (shortestArrayLength * sum_xy) - (sum_x * sum_y);
	var step2 = (shortestArrayLength * sum_x2) - (sum_x * sum_x);
	var step3 = (shortestArrayLength * sum_y2) - (sum_y * sum_y);
	var step4 = Math.sqrt(step2 * step3);
	var answer = step1 / step4;

return answer;
}

function sum(arr)
{
	var sum = 0;
	for( var i = 0; i < arr.length; i++ ){
		sum += arr[i];
	}
	return sum;
}

编译

CSS

@import "https://fonts.googleapis.com/css?family=Hind+Guntur";
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Hind Guntur', sans-serif;
}
body {
    background: #eef2f3;
    background: -webkit-linear-gradient(right, #eee, #eef2f3);
    background: linear-gradient(to left, #eee, #eef2f3);
}
.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
#svg-canvas {
    cursor: crosshair;
}
.card {
    margin-top: 30px;
    background: #fff;
    box-shadow: 9px 7px 37px -6px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    width: 400px;
    height: 400px;
    position: relative;
}
.card .intro {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 180px 40px 40px 40px;
    text-align: center;
    pointer-events: none;
}
.card .intro.hidden {
    display: none;
}
.card .intro h3 {
    font-size: 26px;
    margin: 0;
}
.card .intro p {
    line-height: 20px;
}
.instructions {
    width: 400px;
    padding: 20px 0;
    text-align: center;
    pointer-events: none;
}
.instructions.hidden {
    display: none;
}
.instructions h3 {
    font-size: 26px;
    margin: 20px 0 0 0;
    font-weight: 300;
}
.instructions p {
    line-height: 20px;
}
.hidden {
    display: none;
}

HTML

Trainable Shape Detector

html5, 人工智能

编辑器支持Emmet

快捷键

Trainable Shape Detector

html5, 人工智能

HTML5随机形状和颜色的墙纸生成器

HTML5 GSAP星球大战BB8机器人逃亡动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：