html交互式添加线要素,HTML5 Canvas绘制交互式交叉线
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
$(function() {
// Console Log
function cl($m) {
console.log($m);
}
// Utility Console Log
var sp = ', ';
var 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
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 + '
' + 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();
});
html交互式添加线要素,HTML5 Canvas绘制交互式交叉线相关推荐
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
- html5添加随机率,HTML5 canvas 绘制随机曲线 并实现放大功能
正在开发一个无线监控系统,要显示频率波形图,所以最近一段时间再研究HTML5 canvas 标签,本例实现了根基传经来的数据绘制曲线,并对整个图实行局部放大功能. js代码(canvas_06.js) ...
- HTML绘制交互图,基于 HTML5 Canvas 的交互式地铁线路图
原标题:基于 HTML5 Canvas 的交互式地铁线路图 作者:xhload3d my.oschina.net/xhload3d/blog/1629064 摘要:感觉目前地铁上的地铁线路图也不是很人 ...
- 基于php的地铁查询系统,HTML5 Canvas实现交互式地铁线路图
这篇文章给大家介绍的文章内容是关于基于 HTML5 Canvas 的交互式地铁线路图,有很好的参考价值,希望可以帮助到有需要的朋友. 前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地 ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- 在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
- h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
- html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制 全屏星空背景 动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测 代码结构 1. 引入JS 2. HTML代码 var m ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
最新文章
- CPU 深夜狂飙,一帮大佬都傻眼了......
- 深入理解并使用python的模块与包
- Java:如何正确地使用异常详解
- 5.一文搞懂MySQL的数据类型
- 固件 日立 硬盘_最强性价比储存方案体验:这硬盘盒,真香!
- intellij idea 中右键项目没有git
- 【Java开发】之配置文件的读取
- 《Java高并发编程详解:多线程与架构设计》笔记(一)
- word的图片和自选图形组合问题
- KumiaoQQ机器人框架源码
- 编程的思想是什么,如何建立编程思想,如何训练和提高编程思想?
- 2017.10.23 Arduino Atmel EFM32低功耗监测
- SPCA5XX摄像头驱动源码分析
- 使用telnet来在线调试海思开发板
- 【网红流水线车间】“制造”李佳琦们的神秘组织,到底是怎么让网红火起来的?...
- flash ftp 注册码
- 图像处理之LUT表的使用
- 如何在安卓手机上查看airpods pro的电量
- centos7 php oci,linux centos centos7 安装oci8和pdo_oci扩展
- 4.keras实现--生成式深度学习之用变分自编码器VAE生成图像(mnist数据集和名人头像数据集)...