前端开发者| web前端开发技术 说课 |
| web前端开发技术知识体系 |
| it前端技术开发论文 |
只使用了基本的画圆，就可以做出来一个有趣的特效
不过有BUG，圆移动到边缘的时候如果正巧变大就会卡住- –
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>画布应用</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#mainCanvas {
width: 100%;
height: 100%;
background: #efefef;
cursor: pointer;
}
</style>
</head>
<body>
<div id=”container”><canvas id=”mainCanvas”></canvas></div>
<script type=”text/javascript”>
window.onload = function() {
setTimeout(function() {
dataInit()
canvasFix()
document.body.onmousemove = function(e) {
mouseLoc = getMouseLoc(e)
}
document.body.onmousedown = function(e) {
moveFlag = false
}
document.body.onmouseup = function(e) {
moveFlag = true
}
initCircArr()
setInterval(function() {
drawCirc()
}, 20)
}, 100)
}
/**
*
* @authors CJY
* @date 2015-04-30 09:16:55
*/
var canvas = null
var circArr = null
var circNum = null
var defaultR = null
var circ = null
var mouseLoc = null
var moveFlag = null
var canvasDrawCirc = function(canv, circ) {
circ.canv = canv.getContext(‘2d’)
circ.canv.globalAlpha = 0.9
circ.canv.fillStyle = circ.col
circ.canv.beginPath()
circ.canv.arc(
Number(circ.loc[0]),
Number(circ.loc[1]),
circ.r,
0,
Math.PI * 2,
true,
)
circ.canv.closePath()
circ.canv.fill()
}
var buildCirc = function(loc, r, col, direction, speed) {
var circ = new Object()
circ.loc = loc //圆的位置
circ.minR = r //圆的最小半径
circ.maxR = r + 30 //圆的最大半径
circ.r = circ.maxR //圆的当前半径
if (col != null || col != undefined) {
//圆的颜色
circ.col = col
} else {
circ.col = ‘black’
}
if (direction != null || direction != undefined) {
//圆的方向
circ.direction = direction
} else {
circ.direction = null
}
if (speed != null || speed != undefined) {
//圆的运动速度
circ.speed = speed
} else {
circ.speed = 3
}
circ.xF = 1
circ.yF = 1
circ.dF = 1
//圆的移动方法
circ.move = function() {
if (circ.direction == null) {
return
}
if (circ.mouseCatchFlag && !moveFlag) {
} else {
circ.mouseCatcher()
circ.loc = new Array(
circ.loc[0] +
circ.speed *
Math.sin((circ.direction * Math.PI) / 180) *
circ.xF,
circ.loc[1] +
circ.speed *
Math.cos((circ.direction * Math.PI) / 180) *
circ.yF,
)
circ.turn()
circ.sizer()
}
setTimeout(circ.move, 20)
}
//圆的转向方法
circ.turn = function() {
if (!!!canvas) {
return
}
if (
circ.loc[0] – circ.r <= 10 ||
circ.loc[0] + circ.r >= canvas.width – 10
) {
circ.xF *= -1
} else if (
circ.loc[1] – circ.r <= 10 ||
circ.loc[1] + circ.r >= canvas.height – 10
) {
circ.yF *= -1
}
if (circ.direction >= 360) {
circ.dF *= -1
} else if (circ.direction <= 0) {
circ.dF *= -1
}
circ.direction += circ.dF
}
//圆的大小变化方法
circ.baseR = 1
circ.sizer = function() {
if (circ.r < circ.minR) {
circ.r = circ.minR
} else if (circ.r > circ.maxR) {
circ.r = circ.maxR
}
if (circ.mouseCatchFlag) {
circ.baseR = -3
} else {
circ.baseR = 1
}
circ.r -= circ.baseR
}
//圆对鼠标的捕抓方法
circ.mouseCatchFlag = false
circ.mouseCatcher = function() {
var arange = 100
if (
mouseLoc[0] – arange < circ.loc[0] &&
circ.loc[0] < mouseLoc[0] + arange
) {
if (
mouseLoc[1] – arange + 50 < circ.loc[1] &&
circ.loc[1] < mouseLoc[1] + arange – 50
) {
circ.mouseCatchFlag = true
} else {
circ.mouseCatchFlag = false
}
} else {
circ.mouseCatchFlag = false
}
}
return circ
}
function clearCanvas(canvas) {
var cleaner = canvas.getContext(‘2d’)
cleaner.fillStyle = ‘#FFF’
cleaner.fillRect(0, 0, canvas.width, canvas.height)
}
function initCircArr(e) {
for (var i = 0; i < circNum; i++) {
circ = buildCirc(
randomLocation(minX, minY, maxX, maxY),
10,
randomColor(),
randomDirection(),
randomSpeed(),
)
circ.move()
circArr.push(circ)
}
}
function drawCirc() {
clearCanvas(canvas)
for (var i = 0; i < circArr.length; i++) {
canvasDrawCirc(canvas, circArr[i])
}
}
/**
*
* @authors CJY
* @date 2015-04-30 09:21:16
*/
var maxR = null
var maxX = null,
minX = null
var maxY = null,
minY = null
var maxSpeed = null,
minSpeed = null
//通过ID获取元素
function id(id) {
return document.getElementById(id)
}
function canvasFix() {
canvas.height = canvas.clientHeight
canvas.width = canvas.clientWidth
}
function dataInit() {
canvas = id(‘mainCanvas’)
circArr = new Array()
circNum = 100
defaultR = 30
maxR = 100
;(maxX = canvas.offsetWidth – maxR), (minX = maxR)
;(maxY = canvas.offsetHeight – maxR), (minY = maxR)
;(maxSpeed = 7), (minSpeed = 3)
mouseLoc = new Array()
moveFlag = true
}
//随机位置
function randomLocation(minX, minY, maxX, maxY) {
var loc = new Array(
parseInt(Math.random() * (maxX – minX) + minX),
parseInt(Math.random() * (maxY – minY) + minY),
)
return loc
}
function randomDirection() {
return parseInt(Math.random() * 360)
}
function randomColor() {
var cn = Math.random()
if (cn < 0.2) {
var num = parseInt(Math.random() * 6)
switch (num) {
case 0:
var color = ‘black’
break
case 1:
var color = ‘red’
break
case 2:
var color = ‘blue’
break
case 3:
var color = ‘yellow’
break
case 4:
var color = ‘pink’
break
default:
var color = ‘green’
}
} else {
var r = parseInt(Math.random() * 255)
var g = parseInt(Math.random() * 255)
var b = parseInt(Math.random() * 255)
var color =
‘#’ + r.toString(16) + g.toString(16) + b.toString(16)
}
return color
}
function randomSpeed() {
return parseInt(
Math.random() * (maxSpeed – minSpeed) + minSpeed,
)
}
function randomR() {
return parseInt(Math.random() * (35 – 10) + 10)
}
function getMouseLoc(e) {
var eve = e || window.event
var loc = new Array(eve.clientX, eve.clientY)
return loc
}
</script>
</body>
</html>
| web前端开发技术 html |
| 前端开发技术发展方向 |
| 前端开发技术难题 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册