Canvas放射线动画_前端开发者

前端开发基础教程

web前端开发面试视频教程

html 代码

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas放射线动画</title>

<style>

body {

background: #000;

overflow: hidden;

margin: 0;

padding: 0;

}

canvas {

width: 45%;

margin: 5% 30%;

}

</style>

</head>

<body>

var c

var $

var w = 600

var h = 600

constant = 15

var rad = 300

var timeout = 0

c = document.getElementById(‘canv’)

$ = c.getContext(‘2d’)

drawLines()

function drawLines() {

$.fillRect(0, 0, w, h)

$.translate(w / 2, h / 2)

for (var i = 0; i < 25; i++) {

for (var n = -45; n <= 45; n += constant) {

setTimeout(‘draw(‘ + n + ‘);’, 100 * timeout)

timeout++

}

function draw(n) {

$.beginPath()

$.moveTo(0, rad)

var radians = (Math.PI / 180) * n

var x =

(rad * Math.sin(radians)) / Math.sin(Math.PI / 2 – radians)

$.lineTo(x, 0)

if (Math.abs(n) == 45) {

$.strokeStyle = rndColor()

$.lineWidth = 2

} else if (n == 0) {

$.strokeStyle = ‘rgb(200,200,200)’

$.lineWidth = 0.5

} else {

$.strokeStyle = ‘rgb(110,110,110)’

$.lineWidth = 0.5

}

$.stroke()

$.rotate((Math.PI / 180) * 15)

}

function rndColor() {

var r = (255 * Math.random()) | 0,

g = (255 * Math.random()) | 0,

b = (255 * Math.random()) | 0

return ‘rgb(‘ + r + ‘,’ + g + ‘,’ + b + ‘)’

}

</script>

</body>

</html>

前端开发面试视频教程

计算机前端开发视频教程下载

Canvas放射线动画

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发