Get rid of a redundant directory level.
This commit is contained in:
1
projects/canvas/.gitignore
vendored
Normal file
1
projects/canvas/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
bak/
|
||||
117
projects/canvas/box.htm
Normal file
117
projects/canvas/box.htm
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Canvas box</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function box() {
|
||||
var ctx=document.getElementById('canvas').getContext('2d')
|
||||
var i
|
||||
if (x<0 || x>639 || y<0 || y>399) end=[320,-100]
|
||||
else {
|
||||
for (i=0;i<pl;i++) {
|
||||
if (p[i][0]==x) x++
|
||||
if (p[i][1]==y) y++
|
||||
}
|
||||
end=[x,y]
|
||||
}
|
||||
|
||||
if (end[1]>p[0][1]) l*=-1
|
||||
var ep=new Array()
|
||||
for (i=0;i<pl;i++) ep[i]=[p[i][0]-l/((end[1]-p[i][1])/(end[0]-p[i][0])),p[i][1]-l]
|
||||
ctx.clearRect(0,0,640,400)
|
||||
ctx.beginPath()
|
||||
for (i=0;i<pl;i++) {
|
||||
ni=i+1-Math.floor((i+1)/pl)*pl
|
||||
ctx.moveTo(p[i][0],p[i][1])
|
||||
ctx.lineTo(p[ni][0],p[ni][1])
|
||||
ctx.moveTo(p[i][0],p[i][1])
|
||||
ctx.lineTo(ep[i][0],ep[i][1])
|
||||
ctx.lineTo(ep[ni][0],ep[ni][1])
|
||||
}
|
||||
ctx.stroke()
|
||||
|
||||
if (p[2][0]>637) a=-1
|
||||
else if (p[0][0]<3) a=1
|
||||
for (i=0;i<pl;i++) p[i][0]+=a
|
||||
|
||||
if (p[2][0]-p[1][0]==75) z=-1
|
||||
else if (p[2][0]-p[1][0]==25) z=1
|
||||
p[2][0]+=z
|
||||
p[3][0]+=z
|
||||
|
||||
if (p[1][1]>397) b=-.5
|
||||
else if (p[0][1]<3) b=.5
|
||||
for (i=0;i<pl;i++) p[i][1]+=b
|
||||
|
||||
if (p[1][1]-p[0][1]==75) z=-1
|
||||
else if (p[1][1]-p[0][1]==25) z=1
|
||||
p[1][1]+=z
|
||||
p[2][1]+=z
|
||||
|
||||
if (l==-10) c=.5
|
||||
else if (l==40) c=-.5
|
||||
l+=c
|
||||
|
||||
setTimeout("box()",10)
|
||||
}
|
||||
|
||||
function load() {
|
||||
p=new Array()
|
||||
p[0]=[2,348]
|
||||
p[1]=[2,398]
|
||||
p[2]=[52,398]
|
||||
p[3]=[52,348]
|
||||
pl=p.length
|
||||
l=10
|
||||
c=.5
|
||||
z=-1
|
||||
x=-1
|
||||
y=-1
|
||||
|
||||
box()
|
||||
}
|
||||
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h=self.innerHeight
|
||||
w=self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h=document.documentElement.clientHeight
|
||||
w=document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h=document.body.clientHeight
|
||||
w=document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
function mm(e) {
|
||||
getwh()
|
||||
x=Math.floor(e.pageX-(w-642)/2-2)
|
||||
y=Math.floor(e.pageY-(h-402)/2-2)
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
document.onmousemove=mm
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
78
projects/canvas/cb.htm
Normal file
78
projects/canvas/cb.htm
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Circles in boxes</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h=self.innerHeight
|
||||
w=self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h=document.documentElement.clientHeight
|
||||
w=document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h=document.body.clientHeight
|
||||
w=document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
function mm(e) {
|
||||
getwh()
|
||||
x=Math.floor(e.pageX-(w-642)/2-2)
|
||||
y=Math.floor(e.pageY-(h-402)/2-2)
|
||||
if (x<0) x=0
|
||||
if (x>639) x=639
|
||||
if (y<0) y=0
|
||||
if (y>399) y=399
|
||||
x=(x-320)*(-1)+160
|
||||
if (x>320) x=320
|
||||
if (x<160) lx=160
|
||||
else lx=x
|
||||
if (x<0) x=0
|
||||
if (x>160) rx=150
|
||||
else rx=x*(-1)+310
|
||||
lw=x-10
|
||||
if (lw<150) lw=150
|
||||
rw=310-x
|
||||
if (rw<150) rw=150
|
||||
lh=lw*390/310
|
||||
rh=rw*390/310
|
||||
|
||||
var ctx=document.getElementById('canvas').getContext('2d')
|
||||
ctx.lineWidth=2
|
||||
ctx.clearRect(0,0,640,400)
|
||||
ctx.strokeRect(320-lx+5,(390-lh)/2+5,lx-10,lh)
|
||||
ctx.strokeRect(325,(390-rh)/2+5,rx,rh)
|
||||
ctx.beginPath()
|
||||
ctx.arc(lw/2-lx+325,lh/2+(390-lh)/2+5,lw/4,0,Math.PI*2,true)
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.arc(rw/2+rw-rx+325,rh/2+(390-rh)/2+5,rw/4,0,Math.PI*2,true)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
document.onmousemove=mm
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
482
projects/canvas/cc.htm
Normal file
482
projects/canvas/cc.htm
Normal file
@@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Circle Class</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
/*
|
||||
This program is free software. It comes without any warranty, to
|
||||
the extent permitted by applicable law. You can redistribute it
|
||||
and/or modify it under the terms of the Do What The Fuck You Want
|
||||
To Public License, Version 2, as published by Sam Hocevar. See
|
||||
http://sam.zoy.org/wtfpl/COPYING for more details.
|
||||
*/
|
||||
|
||||
/*
|
||||
This JS class attempts to make an interactive site with the canvas element.
|
||||
In time this will not only be a cirlce class, but more like an object class.
|
||||
The fun stuff happens at the end of this file.
|
||||
*/
|
||||
|
||||
function Circle(posX, posY, radius, fillColor, borderWidth, borderColor, visible) {
|
||||
// Default to defaults if nothing is specified
|
||||
if (posX == undefined) var posX = 0
|
||||
if (posY == undefined) var posY = 0
|
||||
if (radius == undefined) var radius = 50
|
||||
if (fillColor == undefined) var fillColor = '#ddd'
|
||||
if (borderWidth == undefined) var borderWidth = 2
|
||||
if (borderColor == undefined) var borderColor = '#444'
|
||||
if (visible == undefined) var visible = true
|
||||
this.visible = visible
|
||||
|
||||
// Get number in order of creation
|
||||
this.num = objects.length
|
||||
|
||||
// Create canvas element
|
||||
this.element = document.createElement('canvas')
|
||||
if (!this.visible) this.hide()
|
||||
this.element.style.zIndex = this.num + 2
|
||||
wrapper.appendChild(this.element)
|
||||
this.context = this.element.getContext('2d')
|
||||
|
||||
// Append to global objects
|
||||
objects.splice(objects.length, objects.length, this)
|
||||
|
||||
this.state = 'normal'
|
||||
this.globalstate = 'normal'
|
||||
this.savedstate = 'hover'
|
||||
|
||||
this.x = posX
|
||||
this.y = posY
|
||||
this.radius = radius
|
||||
this.fillColor = fillColor
|
||||
this.borderWidth = borderWidth
|
||||
this.borderColor = borderColor
|
||||
|
||||
var i
|
||||
|
||||
for (i in style_states) {
|
||||
this[style_states[i]] = {}
|
||||
this[style_states[i]].x = false
|
||||
this[style_states[i]].y = false
|
||||
this[style_states[i]].radius = false
|
||||
this[style_states[i]].fillColor = false
|
||||
this[style_states[i]].borderWidth = false
|
||||
this[style_states[i]].borderColor = false
|
||||
}
|
||||
|
||||
for (i in event_states) {
|
||||
this[event_states[i]] = '' //'dbg.innerHTML+=" '+event_states[i]+'"'
|
||||
}
|
||||
|
||||
// Keep track of mousedown events
|
||||
this.mousedown_done = false
|
||||
|
||||
// Keep track of hovering
|
||||
this.hovering = false
|
||||
|
||||
this.create()
|
||||
}
|
||||
|
||||
Circle.prototype.create = function() {
|
||||
var posX, posY, radius, fillColor, borderWidth, borderColor, i
|
||||
|
||||
posX = this.get('x')
|
||||
posY = this.get('y')
|
||||
radius = this.get('radius')
|
||||
fillColor = this.get('fillColor')
|
||||
borderWidth = this.get('borderWidth')
|
||||
borderColor = this.get('borderColor')
|
||||
|
||||
var mn = radius * 2 + borderWidth
|
||||
var mnh = mn / 2
|
||||
|
||||
this.element.width = mn
|
||||
this.element.height = mn
|
||||
this.element.style.width = mn + 'px'
|
||||
this.element.style.height = mn + 'px'
|
||||
this.element.style.left = posX - mnh + 'px'
|
||||
this.element.style.top = posY - mnh + 'px'
|
||||
|
||||
// Create the circle
|
||||
this.context.beginPath()
|
||||
this.context.arc(mnh, mnh, radius, 0, Math.PI*2, true)
|
||||
|
||||
if (typeof(fillColor) == 'string')
|
||||
this.context.fillStyle = fillColor
|
||||
else {
|
||||
if (fillColor[0] == 'linear') {
|
||||
var x1, y1, x2, y2
|
||||
if (fillColor.length > 2) {
|
||||
var angle = (fillColor[2] + 45) % 360 // Center it
|
||||
|
||||
if (angle >= 0 && angle < 90) {
|
||||
x1 = (angle / 90) * mn
|
||||
y1 = 0
|
||||
x2 = ((90 - angle) / 90) * mn
|
||||
y2 = mn
|
||||
}
|
||||
else if (angle >= 90 && angle < 180) {
|
||||
x1 = mn
|
||||
y1 = ((angle - 90) / 90) * mn
|
||||
x2 = 0
|
||||
y2 = ((90 - (angle - 90)) / 90) * mn
|
||||
}
|
||||
else if (angle >= 180 && angle < 270) {
|
||||
x1 = ((90 - (angle - 180)) / 90) * mn
|
||||
y1 = mn
|
||||
x2 = ((angle - 180) / 90) * mn
|
||||
y2 = 0
|
||||
}
|
||||
else if (angle >= 270 && angle < 360) {
|
||||
x1 = 0
|
||||
y1 = ((90 - (angle - 270)) / 90) * mn
|
||||
x2 = mn
|
||||
y2 = ((angle - 270) / 90) * mn
|
||||
}
|
||||
}
|
||||
else {
|
||||
x1 = mnh
|
||||
y1 = 0
|
||||
x2 = mnh
|
||||
y2 = mn
|
||||
}
|
||||
var grad = this.context.createLinearGradient(x1, y1, x2, y2)
|
||||
}
|
||||
else {
|
||||
var lenpos, reallen, angle, x1, y1
|
||||
if (fillColor.length > 2) {
|
||||
lenpos = (fillColor[2])
|
||||
if (fillColor.length > 3) {
|
||||
angle = (fillColor[3] + 45)
|
||||
while (angle < 0) {
|
||||
angle += 360
|
||||
}
|
||||
angle = angle % 360
|
||||
}
|
||||
else angle = 0
|
||||
}
|
||||
else {
|
||||
lenpos = 0
|
||||
angle = 0
|
||||
}
|
||||
|
||||
reallen = lenpos * radius
|
||||
|
||||
if (angle >= 0 && angle < 90) {
|
||||
x1 = mnh + Math.sin((angle - 45) * Math.PI / 180) * reallen
|
||||
y1 = mnh - Math.cos((angle - 45) * Math.PI / 180) * reallen
|
||||
}
|
||||
else if (angle >= 90 && angle < 180) {
|
||||
x1 = mnh + Math.cos((angle - 135) * Math.PI / 180) * reallen
|
||||
y1 = mnh + Math.sin((angle - 135) * Math.PI / 180) * reallen
|
||||
}
|
||||
else if (angle >= 180 && angle < 270) {
|
||||
x1 = mnh - Math.sin((angle - 225) * Math.PI / 180) * reallen
|
||||
y1 = mnh + Math.cos((angle - 225) * Math.PI / 180) * reallen
|
||||
}
|
||||
else if (angle >= 270 && angle < 360) {
|
||||
x1 = mnh - Math.cos((angle - 315) * Math.PI / 180) * reallen
|
||||
y1 = mnh - Math.sin((angle - 315) * Math.PI / 180) * reallen
|
||||
}
|
||||
|
||||
var grad = this.context.createRadialGradient(x1, y1, 0, mnh, mnh, radius)
|
||||
}
|
||||
|
||||
for (i in fillColor[1]) {
|
||||
grad.addColorStop(i / (fillColor[1].length - 1), fillColor[1][i])
|
||||
}
|
||||
|
||||
this.context.fillStyle = grad
|
||||
}
|
||||
this.context.lineWidth = borderWidth
|
||||
this.context.strokeStyle = borderColor
|
||||
|
||||
// Clear the screen
|
||||
this.context.clearRect(0, 0, mn, mn)
|
||||
this.context.stroke()
|
||||
this.context.fill()
|
||||
}
|
||||
|
||||
Circle.prototype.standby = function() {
|
||||
if (!this.visible) return false
|
||||
|
||||
var posX, posY, radius, borderWidth
|
||||
|
||||
posX = this.get('x')
|
||||
posY = this.get('y')
|
||||
radius = this.get('radius')
|
||||
borderWidth = this.get('borderWidth')
|
||||
|
||||
if (!object_hover && Math.sqrt(Math.pow((x - posX), 2) + Math.pow((y - posY), 2)) < radius + borderWidth / 2) {
|
||||
// If the cursor is inside the circle
|
||||
|
||||
// No more objects may react
|
||||
object_hover = true
|
||||
|
||||
if (!this.hovering)
|
||||
this.eval(this.onmouseover)
|
||||
else if (x != ox || y != oy)
|
||||
this.eval(this.onmousemove)
|
||||
|
||||
// We're hovering!
|
||||
this.hovering = true
|
||||
|
||||
if (this.globalstate == 'onmousedown') {
|
||||
this.state = 'active'
|
||||
this.savedstate = 'active'
|
||||
if (!this.onmousedown_done) {
|
||||
this.onmousedown_done = true
|
||||
this.eval(this.onmousedown)
|
||||
}
|
||||
}
|
||||
else if (this.globalstate == 'onmouseup') {
|
||||
this.state = 'hover'
|
||||
this.savedstate = 'hover'
|
||||
this.eval(this.onmouseup)
|
||||
if (this.onmousedown_done)
|
||||
this.eval(this.onclick)
|
||||
|
||||
this.onmousedown_done = false
|
||||
}
|
||||
else {
|
||||
// Last resort
|
||||
this.state = this.savedstate
|
||||
}
|
||||
}
|
||||
else {
|
||||
// If the cursor is outside the circle
|
||||
|
||||
if (this.hovering) {
|
||||
// No more hovering..
|
||||
this.hovering = false
|
||||
this.eval(this.onmouseout)
|
||||
}
|
||||
// Reset everything
|
||||
this.state = 'normal'
|
||||
|
||||
if (this.globalstate == 'onmouseup') {
|
||||
this.savedstate = 'hover'
|
||||
this.onmousedown_done = false
|
||||
}
|
||||
}
|
||||
|
||||
this.globalstate = 'normal'
|
||||
|
||||
// Create it and draw it to the screen
|
||||
this.create()
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
Circle.prototype.eval = function(code) {
|
||||
var codetype = typeof(code)
|
||||
if (codetype == 'function')
|
||||
code = (code + '').split('function ')[1].split('{')[0]
|
||||
try {
|
||||
eval(code)
|
||||
return true
|
||||
}
|
||||
catch(e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
Circle.prototype.getobj = function() {
|
||||
if (this.state == 'normal')
|
||||
return this
|
||||
else
|
||||
return this[this.state]
|
||||
}
|
||||
|
||||
Circle.prototype.get = function(circlevar) {
|
||||
var cobj = this.getobj()
|
||||
if (cobj[circlevar] === false) {
|
||||
if (this.state == 'active' && this.hover[circlevar] !== false)
|
||||
return this.hover[circlevar]
|
||||
else return this[circlevar]
|
||||
}
|
||||
else return cobj[circlevar]
|
||||
}
|
||||
|
||||
Circle.prototype.set = function(circle_var, value) {
|
||||
this[circle_var] = value
|
||||
for (var i in event_states) {
|
||||
this[event_states[i]][circle_var] = value
|
||||
}
|
||||
}
|
||||
|
||||
Circle.prototype.hide = function() {
|
||||
this.element.style.display = 'none'
|
||||
this.visible = false
|
||||
}
|
||||
|
||||
Circle.prototype.show = function() {
|
||||
this.element.style.display = 'block'
|
||||
this.visible = true
|
||||
}
|
||||
|
||||
|
||||
Circle.prototype.raiseIndex = function(amount) {
|
||||
if (amount == undefined) var amount = 1
|
||||
return this.changeIndex(amount)
|
||||
}
|
||||
|
||||
Circle.prototype.lowerIndex = function(amount) {
|
||||
if (amount == undefined) var amount = 1
|
||||
return this.changeIndex(-amount)
|
||||
}
|
||||
|
||||
Circle.prototype.toTop = function() {
|
||||
return this.changeIndex(objects.length - this.num - 1)
|
||||
}
|
||||
|
||||
Circle.prototype.toBottom = function() {
|
||||
return this.changeIndex(-this.num)
|
||||
}
|
||||
|
||||
Circle.prototype.changeIndex = function(crement) {
|
||||
if (objects.length > this.num + crement && 0 <= this.num + crement) {
|
||||
objects.splice(this.num, 1)
|
||||
objects.splice(this.num + crement, 0, this)
|
||||
this.update_indexes()
|
||||
return true
|
||||
}
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
Circle.prototype.remove = function() {
|
||||
objects.splice(this.num, 1)
|
||||
this.update_indexes()
|
||||
wrapper.removeChild(this.element)
|
||||
delete this
|
||||
}
|
||||
|
||||
Circle.prototype.update_indexes = function() {
|
||||
for (var i in objects) {
|
||||
objects[i].num = i * 1
|
||||
objects[i].element.style.zIndex = i * 1 + 2
|
||||
}
|
||||
}
|
||||
|
||||
function standby() {
|
||||
for (var i = objects.length - 1; i > -1; i--) {
|
||||
objects[i].standby()
|
||||
}
|
||||
object_hover = false
|
||||
ox = x
|
||||
oy = y
|
||||
timer = setTimeout('standby()')
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
// Globals
|
||||
x = 0
|
||||
y = 0
|
||||
ox = 0
|
||||
oy = 0
|
||||
objects = new Array()
|
||||
object_hover = false
|
||||
getwh()
|
||||
event_states = ['onmouseover', 'onmouseout', 'onmousemove', 'onmousedown', 'onmouseup', 'onclick']
|
||||
style_states = ['hover', 'active']
|
||||
globalstate = 'normal'
|
||||
|
||||
// Creating the wrapper
|
||||
wrapper = document.createElement('div')
|
||||
wrapper.style.position = 'absolute'
|
||||
document.body.appendChild(wrapper)
|
||||
/*dbg = document.createElement('div')
|
||||
dbg.style.position = 'absolute'
|
||||
document.body.appendChild(dbg)*/
|
||||
|
||||
// Adjust on resize
|
||||
window.onresize = function() {
|
||||
getwh()
|
||||
}
|
||||
|
||||
window.onmousedown = function() {
|
||||
for (var i in objects) {
|
||||
objects[i].globalstate = 'onmousedown'
|
||||
}
|
||||
}
|
||||
|
||||
window.onmouseup = function() {
|
||||
for (var i in objects) {
|
||||
objects[i].globalstate = 'onmouseup'
|
||||
}
|
||||
}
|
||||
|
||||
standby()
|
||||
|
||||
loadobjects()
|
||||
}
|
||||
|
||||
window.onmousemove = function(e) {
|
||||
if (!e) var e = window.event
|
||||
if (e.pageX || e.pageY) {
|
||||
x = e.pageX
|
||||
y = e.pageY
|
||||
}
|
||||
else if (e.clientX || e.clientY) {
|
||||
x = e.clientX + document.body.scrollLeft
|
||||
y = e.clientY + document.body.scrollTop
|
||||
}
|
||||
}
|
||||
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h = self.innerHeight
|
||||
w = self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h = document.documentElement.clientHeight
|
||||
w = document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h = document.body.clientHeight
|
||||
w = document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function loadobjects() {
|
||||
circ = new Circle(250, 250, 50, ['radial', ['#00ff00', '#dd33ee', '#888', '#00ffff']], 0, '#000')
|
||||
circ.hover.fillColor = ['radial', ['#0000ff', '#dd33ee', '#333', '#00ffff']]
|
||||
circ.active.fillColor = ['linear', ['#fff', '#000'], -45]
|
||||
|
||||
circ2 = new Circle(270, 280, 30, '#eee', 5, '#333')
|
||||
circ2.hover.fillColor = '#ff00ff'
|
||||
circ2.active.fillColor = '#ff0000'
|
||||
|
||||
circ3 = new Circle(260, 220, 25, ['radial', ['#fff', '#000']], 7, '#333')
|
||||
circ3.hover.fillColor = ['radial', ['#000', '#fff']]
|
||||
|
||||
circ4 = new Circle(340, 290, 60, ['radial', ['rgb(221, 87, 42)', 'rgb(155, 60, 28)'], .6, -10], 0, '#333')
|
||||
circ4.hover.fillColor = ['radial', ['#fff', '#000'], .4, 40]
|
||||
|
||||
// Below is a list of functions that can be used on a circle.
|
||||
/*
|
||||
changeIndex
|
||||
raiseIndex
|
||||
lowerIndex
|
||||
toTop
|
||||
toBottom
|
||||
hide
|
||||
show
|
||||
remove
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
97
projects/canvas/cursor.htm
Normal file
97
projects/canvas/cursor.htm
Normal file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Cursor-following canvas circles</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h=self.innerHeight
|
||||
w=self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h=document.documentElement.clientHeight
|
||||
w=document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h=document.body.clientHeight
|
||||
w=document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
function ani() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
|
||||
ctx.clearRect(0,0,640,400);
|
||||
|
||||
for (var i=0;i<num;i++) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(a[i],b[i],c[i],0,Math.PI*2,true);
|
||||
ctx.stroke();
|
||||
nc=c[i]+Math.floor(Math.random()*3)-1
|
||||
if (nc<minr) nc=minr
|
||||
else if (nc>maxr) nc=maxr
|
||||
c[i]=nc
|
||||
|
||||
|
||||
nb=Math.floor(Math.random()*(diff*2+1))-diff+y
|
||||
if (nb<c[i]) nb=c[i]
|
||||
else if (nb>400-c[i]) nb=400-c[i]
|
||||
b[i]=nb
|
||||
na=Math.floor(Math.random()*(diff*2+1))-diff+x
|
||||
if (na<c[i]) na=c[i]
|
||||
else if (na>640-c[i]) na=640-c[i]
|
||||
a[i]=na
|
||||
}
|
||||
|
||||
setTimeout("ani()",40)
|
||||
}
|
||||
|
||||
function load() {
|
||||
x=320
|
||||
y=200
|
||||
maxr=75
|
||||
minr=25
|
||||
diff=10
|
||||
num=10
|
||||
|
||||
a=new Array()
|
||||
b=new Array()
|
||||
c=new Array()
|
||||
for (var i=0;i<num;i++) {
|
||||
c[i]=Math.floor(Math.random()*50)+25
|
||||
b[i]=Math.floor(Math.random()*(400-c[i]*2))+c[i]
|
||||
a[i]=Math.floor(Math.random()*(640-c[i]*2))+c[i]
|
||||
}
|
||||
|
||||
ani()
|
||||
}
|
||||
|
||||
function mc(e) {
|
||||
getwh()
|
||||
x=Math.floor(e.pageX-(w-642)/2-2)
|
||||
y=Math.floor(e.pageY-(h-402)/2-2)
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
document.onmousemove=mc
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
76
projects/canvas/df.htm
Normal file
76
projects/canvas/df.htm
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CanvasDraw :: Paintbrush</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h=self.innerHeight
|
||||
w=self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h=document.documentElement.clientHeight
|
||||
w=document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h=document.body.clientHeight
|
||||
w=document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
function ani() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
|
||||
if (click) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(ox,oy)
|
||||
ctx.lineTo(x,y)
|
||||
ctx.stroke()
|
||||
}
|
||||
ox=x
|
||||
oy=y
|
||||
|
||||
setTimeout("ani()",1)
|
||||
}
|
||||
|
||||
function load() {
|
||||
x=0
|
||||
y=0
|
||||
ox=0
|
||||
oy=0
|
||||
click=false
|
||||
|
||||
ani()
|
||||
}
|
||||
|
||||
function mm(e) {
|
||||
getwh()
|
||||
x=Math.floor(e.pageX-(w-642)/2-2)
|
||||
y=Math.floor(e.pageY-(h-402)/2-2)
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
document.onmousemove=mm
|
||||
document.onmousedown=function(){click=true}
|
||||
document.onmouseup=function(){click=false}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
106
projects/canvas/dl.htm
Normal file
106
projects/canvas/dl.htm
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CanvasDraw :: Lines</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
click=false
|
||||
coor=false
|
||||
|
||||
function getwh() {
|
||||
if (self.innerHeight) {
|
||||
h=self.innerHeight
|
||||
w=self.innerWidth
|
||||
}
|
||||
else if (document.documentElement && document.documentElement.clientHeight) {
|
||||
h=document.documentElement.clientHeight
|
||||
w=document.documentElement.clientHeight
|
||||
}
|
||||
else if (document.body) {
|
||||
h=document.body.clientHeight
|
||||
w=document.body.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
function ld(num,d) {
|
||||
if (d==0) num=Math.floor(num/10)
|
||||
else num=Math.ceil(num/10)
|
||||
return num
|
||||
}
|
||||
|
||||
function load() {
|
||||
l=new Array()
|
||||
ctx=document.getElementById('canvas').getContext('2d')
|
||||
}
|
||||
|
||||
function mm(e) {
|
||||
getwh()
|
||||
x=Math.floor(e.pageX-(w-642)/2-2)
|
||||
y=Math.floor(e.pageY-(h-402)/2-2)
|
||||
|
||||
if (click) {
|
||||
ctx.clearRect(0,0,640,400)
|
||||
ctx.beginPath()
|
||||
for (var i=0;i<l.length;i++) {
|
||||
ctx.moveTo(l[i][0][0],l[i][0][1])
|
||||
ctx.lineTo(l[i][1][0],l[i][1][1])
|
||||
}
|
||||
ctx.moveTo(ox,oy)
|
||||
ctx.lineTo(x,y)
|
||||
ctx.stroke()
|
||||
}
|
||||
coor=true
|
||||
}
|
||||
|
||||
function mc() {
|
||||
if (coor) {
|
||||
if (click) {
|
||||
if (ld(x,0)==ld(sx,0) && ld(y,0)==ld(sy,0) || ld(x,1)==ld(sx,1) && ld(y,1)==ld(sy,1)) {
|
||||
click=false
|
||||
l[l.length]=[[ox,oy],[sx,sy]]
|
||||
|
||||
ctx.clearRect(0,0,640,400)
|
||||
ctx.beginPath()
|
||||
for (var i=0;i<l.length;i++) {
|
||||
ctx.moveTo(l[i][0][0],l[i][0][1])
|
||||
ctx.lineTo(l[i][1][0],l[i][1][1])
|
||||
}
|
||||
ctx.stroke()
|
||||
|
||||
|
||||
}
|
||||
else l[l.length]=[[ox,oy],[x,y]]
|
||||
}
|
||||
else {
|
||||
sx=x
|
||||
sy=y
|
||||
click=true
|
||||
}
|
||||
ox=x
|
||||
oy=y
|
||||
}
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
document.onmousemove=mm
|
||||
document.onclick=mc
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
BIN
projects/canvas/img/box.png
Normal file
BIN
projects/canvas/img/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
projects/canvas/img/cb.png
Normal file
BIN
projects/canvas/img/cb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
projects/canvas/img/cc.png
Normal file
BIN
projects/canvas/img/cc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
projects/canvas/img/cursor.png
Normal file
BIN
projects/canvas/img/cursor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
projects/canvas/img/df.png
Normal file
BIN
projects/canvas/img/df.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
projects/canvas/img/dl.png
Normal file
BIN
projects/canvas/img/dl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
projects/canvas/img/header.png
Normal file
BIN
projects/canvas/img/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
projects/canvas/img/kr.jpg
Normal file
BIN
projects/canvas/img/kr.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
projects/canvas/img/poly.png
Normal file
BIN
projects/canvas/img/poly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
projects/canvas/img/pr.png
Normal file
BIN
projects/canvas/img/pr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
projects/canvas/img/rc.png
Normal file
BIN
projects/canvas/img/rc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
projects/canvas/img/vc.png
Normal file
BIN
projects/canvas/img/vc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
149
projects/canvas/index.php
Normal file
149
projects/canvas/index.php
Normal file
@@ -0,0 +1,149 @@
|
||||
<?php
|
||||
$files=scandir(".");
|
||||
$fn=sizeof($files);
|
||||
for ($i=0;$i<$fn;$i++) {
|
||||
$link=$files[$i];
|
||||
$imglink=explode(".",$link);
|
||||
$imglink=$imglink[0].".png";
|
||||
if (!is_dir($link) && $link!="." && $link!=".." && $link!="index.php" && $link[0] != '.') {
|
||||
$fo=fopen($link,"r");
|
||||
$fr=fread($fo,filesize($link));
|
||||
fclose($fo);
|
||||
$fr=explode("<title>",$fr);
|
||||
$fr=explode("</title>",$fr[1]);
|
||||
$title=$fr[0];
|
||||
$sites.="<a href='".$link."' style='background-image:url(img/".$imglink.")'>".$title."</a>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Experimenting with canvas</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width:700px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
width:700px;
|
||||
height:100px;
|
||||
margin-bottom:5px;
|
||||
background:#eee url(img/header.png) no-repeat;
|
||||
}
|
||||
|
||||
#content {
|
||||
width:690px;
|
||||
padding:5px 5px 20px 5px;
|
||||
background:#eee;
|
||||
font:14px arial;
|
||||
float:left;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#experiments {
|
||||
width:690px;
|
||||
float:left;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
#experiments a:link, #experiments a:visited {
|
||||
width:211px;
|
||||
height:144px;
|
||||
margin:0 0 10px 10px;
|
||||
padding:3px;
|
||||
float:left;
|
||||
background:#ddd;
|
||||
opacity:.7;
|
||||
filter:alpha(opacity=70);
|
||||
-moz-opacity:.7;
|
||||
display:block;
|
||||
color:#0000ff;
|
||||
text-decoration:none;
|
||||
position:relative;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
#experiments a:hover {
|
||||
background:#ccc;
|
||||
opacity:1;
|
||||
filter:alpha(opacity=100);
|
||||
-moz-opacity:1;
|
||||
color:#0000aa;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font:normal 24px georgia;
|
||||
margin:15px 0 10px 0;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
position:absolute;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
#error {
|
||||
display:none;
|
||||
font:16px arial;
|
||||
color:#ff0000
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function ani() {
|
||||
if (x==0) {
|
||||
x=700
|
||||
y=Math.floor(Math.random()*200)
|
||||
ctx.strokeStyle="rgb("+(Math.floor(Math.random()*128)+50)+","+(Math.floor(Math.random()*128)+50)+","+(Math.floor(Math.random()*128)+50)+")"
|
||||
}
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x,y)
|
||||
if (x<11) {
|
||||
x=0
|
||||
}
|
||||
else {
|
||||
x-=Math.floor(Math.random()*10)+1
|
||||
do {
|
||||
ny=y-(Math.floor(Math.random()*11)-5)
|
||||
} while (ny<2 || ny>197)
|
||||
y=ny
|
||||
}
|
||||
ctx.lineTo(x,y)
|
||||
ctx.stroke()
|
||||
setTimeout("ani()",40)
|
||||
}
|
||||
|
||||
window.onload=function(){
|
||||
ctx=document.getElementById("canvas")
|
||||
if (!ctx.getContext) {
|
||||
document.getElementById("error").style.display="block"
|
||||
return
|
||||
}
|
||||
ctx=ctx.getContext("2d")
|
||||
x=0
|
||||
ani()
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='wrapper'>
|
||||
<div id='header'></div>
|
||||
<div id='content'>
|
||||
<canvas id='canvas' width='700' height='200'></canvas>
|
||||
A new tag has entered the realms of internet browsing: CANVAS! With the canvas tag, people are now able to generate images in HTML! Not all browsers support it, but they probably will at some point. The point is, I've been experimenting a little with it, and to my delight it's actually pretty easy to work with. If you see something in one of my experiments that you like, feel free to copy-paste. Consider it free software.
|
||||
<div id='error'>Your browser doesn't support use of the canvas tag. I haven't included error detection in my experiments, so your browser is likely to show an error. Browsers that support canvas include Firefox, Opera and Safari.</div>
|
||||
<h1>Here it is:</h1>
|
||||
<div id='experiments'>
|
||||
<?php echo $sites; ?>
|
||||
</div>
|
||||
Hopefully your browser won't crash..
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
98
projects/canvas/poly.htm
Normal file
98
projects/canvas/poly.htm
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Polygons</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function drawpoly(x,y,angles,radius,rotate) {
|
||||
var x,y,angles,radius,rotate,angdif,cang,cx,xy,i
|
||||
if (!x) x=320
|
||||
if (!y) y=200
|
||||
if (!angles) angles=5
|
||||
if (!radius) radius=50
|
||||
if (!rotate) rotate=0
|
||||
angdif=360/angles
|
||||
cang=90-rotate
|
||||
cx=Math.cos(cang*Math.PI/180)*radius
|
||||
cy=-Math.sin(cang*Math.PI/180)*radius
|
||||
for (i=1;i<angles+1;i++) {
|
||||
cang=i*angdif+90-rotate
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x+cx,y+cy)
|
||||
cx=Math.cos(cang*Math.PI/180)*radius
|
||||
cy=-Math.sin(cang*Math.PI/180)*radius
|
||||
ctx.lineTo(x+cx,y+cy)
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
function dps() {
|
||||
ctx.clearRect(0,0,640,400)
|
||||
for (var i=0;i<num;i++) {
|
||||
drawpoly(gx[i],gy[i],gang[i],grad[i],grot[i])
|
||||
grad[i]+=mrad[i]*Math.floor(Math.random()*3)
|
||||
if (grad[i]<10) mrad[i]=1
|
||||
else if (grad[i]>100) mrad[i]=-1
|
||||
|
||||
grot[i]+=mrot[i]*Math.floor(Math.random()*3)
|
||||
if (grot[i]<0) mrot[i]=1
|
||||
else if (grot[i]>360) mrot[i]=-1
|
||||
|
||||
gx[i]+=mdirx[i]*(Math.floor(Math.random()*5)+1)
|
||||
gy[i]+=mdiry[i]*(Math.floor(Math.random()*5)+1)
|
||||
if (gx[i]<grad[i]+5) mdirx[i]=1
|
||||
else if (gx[i]>640-grad[i]-5) mdirx[i]=-1
|
||||
if (gy[i]<grad[i]+5) mdiry[i]=1
|
||||
else if (gy[i]>400-grad[i]-5) mdiry[i]=-1
|
||||
}
|
||||
setTimeout("dps()",40)
|
||||
}
|
||||
|
||||
function load() {
|
||||
ctx=document.getElementById('canvas').getContext('2d')
|
||||
gang=new Array()
|
||||
grad=new Array()
|
||||
grot=new Array()
|
||||
gx=new Array()
|
||||
gy=new Array()
|
||||
mdirx=new Array()
|
||||
mdiry=new Array()
|
||||
mrad=new Array()
|
||||
mrot=new Array()
|
||||
num=10
|
||||
for (var i=0;i<num;i++) {
|
||||
gang[i]=Math.floor(Math.random()*8)+3
|
||||
grad[i]=Math.floor(Math.random()*26)+25
|
||||
grot[i]=Math.floor(Math.random()*360)
|
||||
gx[i]=Math.floor(Math.random()*(640-grad[i]*2))+grad[i]
|
||||
gy[i]=Math.floor(Math.random()*(400-grad[i]*2))+grad[i]
|
||||
|
||||
mdirx[i]=Math.floor(Math.random()*2)*2-1
|
||||
mdiry[i]=Math.floor(Math.random()*2)*2-1
|
||||
mrad[i]=Math.floor(Math.random()*2)*2-1
|
||||
mrot[i]=Math.floor(Math.random()*2)*2-1
|
||||
}
|
||||
dps()
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
43
projects/canvas/pr.htm
Normal file
43
projects/canvas/pr.htm
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Canvas picture rotating</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function ani() {
|
||||
ctx.rotate((Math.PI/180)*21)
|
||||
ctx.drawImage(img,-150,-84)
|
||||
setTimeout("ani()",40)
|
||||
}
|
||||
|
||||
function load() {
|
||||
img=new Image()
|
||||
img.onload=function(){
|
||||
ctx=document.getElementById('canvas').getContext('2d')
|
||||
ctx.translate(320,200)
|
||||
ani()
|
||||
}
|
||||
img.src="img/kr.jpg"
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
66
projects/canvas/rc.htm
Normal file
66
projects/canvas/rc.htm
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Random canvas circles</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function ani() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
|
||||
ctx.clearRect(0,0,640,400);
|
||||
|
||||
for (var i=0;i<num;i++) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(a[i],b[i],c[i],0,Math.PI*2,true);
|
||||
ctx.stroke();
|
||||
nc=c[i]+Math.floor(Math.random()*3)-1
|
||||
if (nc<25) nc=25
|
||||
else if (nc>75) nc=75
|
||||
c[i]=nc
|
||||
nb=b[i]+Math.floor(Math.random()*3)-1
|
||||
if (nb<c[i]) nb=c[i]
|
||||
else if (nb>400-c[i]) nb=400-c[i]
|
||||
b[i]=nb
|
||||
na=a[i]+Math.floor(Math.random()*3)-1
|
||||
if (na<c[i]) na=c[i]
|
||||
else if (na>640-c[i]) na=640-c[i]
|
||||
a[i]=na
|
||||
}
|
||||
|
||||
setTimeout("ani()",40)
|
||||
}
|
||||
|
||||
function load() {
|
||||
a=new Array()
|
||||
b=new Array()
|
||||
c=new Array()
|
||||
num=10
|
||||
for (var i=0;i<num;i++) {
|
||||
c[i]=Math.floor(Math.random()*50)+25
|
||||
b[i]=Math.floor(Math.random()*(400-c[i]*2))+c[i]
|
||||
a[i]=Math.floor(Math.random()*(640-c[i]*2))+c[i]
|
||||
}
|
||||
ani()
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
59
projects/canvas/vc.htm
Normal file
59
projects/canvas/vc.htm
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Vortex of canvas circles</title>
|
||||
<style type='text/css'>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top:-200px;
|
||||
margin-left:-320px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
function ani() {
|
||||
var ctx=document.getElementById('canvas').getContext('2d')
|
||||
c++
|
||||
cd=Math.round((t-c)/d)
|
||||
ctx.strokeStyle="rgb("+cd+","+cd+","+cd+")"
|
||||
ctx.beginPath()
|
||||
ctx.arc(x,y,rr,0,Math.PI*2,true)
|
||||
ctx.stroke()
|
||||
|
||||
rr+=p
|
||||
do {
|
||||
nx=x+(Math.floor(Math.random()*11)-5)
|
||||
ny=y+(Math.floor(Math.random()*11)-5)
|
||||
} while (nx-rr<2 || nx+rr>637 || ny-rr<2 || ny+rr>397)
|
||||
x=nx
|
||||
y=ny
|
||||
|
||||
if (rr<r) setTimeout("ani()",40)
|
||||
}
|
||||
|
||||
function load() {
|
||||
x=320
|
||||
y=200
|
||||
r=180
|
||||
rr=0
|
||||
p=.5
|
||||
t=r/p
|
||||
d=t/255
|
||||
c=0
|
||||
ani()
|
||||
}
|
||||
|
||||
window.onload=load
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width='640' height='400'></canvas>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user