前端H5 canvas星空背景连线
摘要： 前端开发 这么写文档 微众 前端开发文档 前端企业官网开发文档 web前端开发步骤文档 点 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta……
| 前端开发 这么写文档 |
| 微众 前端开发文档 |
| 前端企业官网开发文档 |
| web前端开发步骤文档 |
点
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>星空</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
overflow: hidden;
}
#canvas {
display: block;
background: #000;
}
</style>
</head>
<body>
<canvas id=”canvas” width=”200″ height=”200″></canvas>
<script>
//画圆
var canvas = document.getElementById(‘canvas’) //获取canva画布
var cxt = canvas.getContext(‘2d’) //设置canvas的绘画环境，相当于画笔
cxt.fillStyle = ‘pink’ //颜色
cxt.beginPath() //开始路径
cxt.arc(100, 100, 10, 0, Math.PI * 2, false) //圆
cxt.closePath() //闭合路径
cxt.fill() //填充
</script>
</body>
</html>
线
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>星空</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
overflow: hidden;
}
#canvas {
display: block;
background: #000;
}
</style>
</head>
<body>
<canvas id=”canvas” width=”200″ height=”200″></canvas>
<script>
//画圆
var canvas = document.getElementById(‘canvas’) //获取canva画布
var cxt = canvas.getContext(‘2d’) //设置canvas的绘画环境，相当于画笔
var color = cxt.createLinearGradient(50, 100, 100, 50)
color.addColorStop(0, ‘#fff’)
color.addColorStop(1, ‘#8cadf4’)
cxt.save()
cxt.strokeStyle = color
cxt.beginPath()
cxt.moveTo(50, 100) //起点
cxt.lineTo(100, 50) //终点
cxt.closePath()
cxt.stroke()
cxt.restore()
</script>
</body>
</html>
星空完整版
html+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>星空</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
overflow: hidden;
}
#canvas {
display: block;
background: url('http://www.taopic.com/uploads/allimg/140118/234914-14011PZ32692.jpg');
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//定时器卡顿bug解决方法:帧动画
window.requestAnimFrame = (function() {
return (
window.requestAnimFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60)
}
)
})()
var canvas = document.getElementById('canvas') //获取canva画布
var cxt = canvas.getContext('2d') //设置canvas的绘画环境，相当于画笔
var w, h
var num = 200 //初始化星星的数量
var data = [] //存储星星的数据
var move = {} //存储鼠标的数据
window.onresize = into //窗口缩放星星不变
//初始化
function into() {
//窗口缩放星星不变，初始化
data = []
move = {}
//画布和浏览器等宽高
w = canvas.width = window.innerWidth
h = canvas.height = window.innerHeight
//绘制星星的圆点
for (var i = 0; i < num; i++) {
//定义每一次圆生成的随机位置以及模拟运动速度增量
data[i] = {
x: Math.random() * w,
y: Math.random() * h,
cX: Math.random() * 0.6 - 0.3,
cY: Math.random() * 0.6 - 0.3,
}
Circle(data[i].x, data[i].y)
}
}
into()
function Circle(x, y) {
cxt.save() //保存路径
cxt.fillStyle = 'pink' //颜色
cxt.beginPath() //开始路径
cxt.arc(x, y, 0.5, Math.PI * 2, false) //圆
cxt.closePath() //闭合路径
cxt.fill() //填充
cxt.restore() //释放路径
}
//星星运动
!(function draw() {
cxt.clearRect(0, 0, w, h) //先清除整个画布
for (var i = 0; i < num; i++) {
//绘制当前星星
data[i].x += data[i].cX
data[i].y += data[i].cY
//边界值判断
if (data[i].x > w || data[i].x < 0) data[i].cX = -data[i].cX
if (data[i].y > h || data[i].y < 0) data[i].cY = -data[i].cY
Circle(data[i].x, data[i].y)
//用勾股定理判断是否连线
for (var j = i + 1; j < num; j++) {
//上一个点
if (
(data[i].x - data[j].x) * (data[i].x - data[j].x) +
(data[i].y - data[j].y) *
(data[i].y - data[j].y) <=
50 * 50
) {
//绘制线条
line(data[i].x, data[i].y, data[j].x, data[j].y)
}
if (move.x) {
if (
(data[i].x - move.x) * (data[i].x - move.x) +
(data[i].y - move.y) *
(data[i].y - move.y) <=
100 * 100
) {
line(data[i].x, data[i].y, move.x, move.y)
}
}
}
}
//定时器卡顿bug解决方法:帧动画
window.requestAnimFrame(draw)
// setInterval(function(){
// draw();
// },13);
})()
//连线
function line(x1, y1, x2, y2) {
var color = cxt.createLinearGradient(x1, y1, x2, y2)
color.addColorStop(0, '#fff')
color.addColorStop(1, '#8cadf4')
cxt.save()
cxt.strokeStyle = color
cxt.beginPath()
cxt.moveTo(x1, y1) //起点
cxt.lineTo(x2, y2) //终点
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//移入鼠标进行连线
document.onmousemove = function(e) {
move.x = e.clientX
move.y = e.clientY
}
console.log(move)
</script>
</body>
</html>
鼠标移入线变色判断
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>星空</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
overflow: hidden;
}
#canvas {
display: block;
background: url('http://www.taopic.com/uploads/allimg/140118/234914-14011PZ32692.jpg');
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//定时器卡顿bug解决方法:帧动画
window.requestAnimFrame = (function() {
return (
window.requestAnimFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60)
}
)
})()
var canvas = document.getElementById('canvas') //获取canva画布
var cxt = canvas.getContext('2d') //设置canvas的绘画环境，相当于画笔
var w, h
var num = 200 //初始化星星的数量
var data = [] //存储星星的数据
var move = {} //存储鼠标的数据
window.onresize = into //窗口缩放星星不变
//初始化
function into() {
//窗口缩放星星不变，初始化
data = []
move = {}
//画布和浏览器等宽高
w = canvas.width = window.innerWidth
h = canvas.height = window.innerHeight
//绘制星星的圆点
for (var i = 0; i < num; i++) {
//定义每一次圆生成的随机位置以及模拟运动速度增量
data[i] = {
x: Math.random() * w,
y: Math.random() * h,
cX: Math.random() * 0.6 - 0.3,
cY: Math.random() * 0.6 - 0.3,
}
Circle(data[i].x, data[i].y)
}
}
into()
function Circle(x, y) {
cxt.save() //保存路径
cxt.fillStyle = 'pink' //颜色
cxt.beginPath() //开始路径
cxt.arc(x, y, 0.5, Math.PI * 2, false) //圆
cxt.closePath() //闭合路径
cxt.fill() //填充
cxt.restore() //释放路径
}
//星星运动
!(function draw() {
cxt.clearRect(0, 0, w, h) //先清除整个画布
for (var i = 0; i < num; i++) {
//绘制当前星星
data[i].x += data[i].cX
data[i].y += data[i].cY
//边界值判断
if (data[i].x > w || data[i].x < 0) data[i].cX = -data[i].cX
if (data[i].y > h || data[i].y < 0) data[i].cY = -data[i].cY
Circle(data[i].x, data[i].y)
//用勾股定理判断是否连线
for (var j = i + 1; j < num; j++) {
//上一个点
if (
(data[i].x - data[j].x) * (data[i].x - data[j].x) +
(data[i].y - data[j].y) *
(data[i].y - data[j].y) <=
60 * 60
) {
//绘制线条
line(
data[i].x,
data[i].y,
data[j].x,
data[j].y,
false,
)
}
if (move.x) {
if (
(data[i].x - move.x) * (data[i].x - move.x) +
(data[i].y - move.y) *
(data[i].y - move.y) <=
120 * 120
) {
line(data[i].x, data[i].y, move.x, move.y, true)
}
}
}
}
//定时器卡顿bug解决方法:帧动画
window.requestAnimFrame(draw)
// setInterval(function(){
// draw();
// },13);
})()
//判断鼠标移入,变色连线
function line(x1, y1, x2, y2, isMove) {
var color = cxt.createLinearGradient(x1, y1, x2, y2)
if (!isMove) {
color.addColorStop(0, '#3cbafc')
color.addColorStop(1, '#a5dffd')
} else {
color.addColorStop(0, '#fff')
color.addColorStop(1, '#f4f59b')
}
cxt.save()
cxt.strokeStyle = color
cxt.beginPath()
cxt.moveTo(x1, y1) //起点
cxt.lineTo(x2, y2) //终点
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//移入鼠标进行连线
document.onmousemove = function(e) {
move.x = e.clientX
move.y = e.clientY
}
console.log(move)
</script>
</body>
</html>
| web前端开发文档论文 |
| web前端开发规范文档 |
| 阿里前端开发规范文档 |
| web前端开发流程文档 |
» 本文来自：前端开发者 » 《前端H5 canvas星空背景连线》
» 本文链接地址：https://www.rokub.com/6743.html
» 您也可以订阅本站：https://www.rokub.com
近期评论