-
-
Save anonymous/9ab02a179bd3e087c241 to your computer and use it in GitHub Desktop.
canvas 動畫
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html><head><meta charset="utf-8"></head> | |
<style> | |
div { | |
background: #AACCEE; | |
border: solid 1px #336699; | |
margin: 10px; | |
padding: 5px; | |
border-radius: 5px; | |
display: inline-block; | |
text-align: center | |
} | |
canvas { | |
cursor: pointer; | |
} | |
</style> | |
<body><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div> | |
<script type="text/javascript"> | |
var canvas = document.getElementById("a_canvas"); | |
var ctx = canvas.getContext("2d"); | |
var a= "red"; | |
var b= "yellow"; | |
var c= "#AACCEE"; | |
ctx.fillStyle ="#AACCEE"; | |
ctx.fillRect(0,0,800,800); | |
var i=0; | |
//圓的起始點 | |
var startX=150; | |
var startY=150; | |
canvas.onmousedown = function(e){ | |
i=0; | |
startX = e.x; | |
startY = e.y; | |
reDraw(e, true); | |
} | |
function reDraw(){ | |
// 在每0.3秒呼叫ball一次 | |
drawBall(); | |
time1=setInterval(drawBall,100); | |
} | |
//圓逐漸放大 | |
function drawBall(){ | |
ctx.clearRect(0,0,800,800); | |
//建立CanvasGradient物件 g (第一個圓的座標,第一個圓的半徑,第二個圓的座標,第二個圓的半徑) | |
var g = ctx.createRadialGradient(startX, startY, i, startX, startY, i*2); | |
//新增漸層的顏色 | |
g.addColorStop(0, a); | |
g.addColorStop(0.7, b); | |
g.addColorStop(1.0, c); | |
//指定用來填滿的顏色跟樣式 | |
ctx.fillStyle = g; | |
ctx.fillRect(startX-150,startY-150,startX+150,startX+150); | |
//增加圓的半徑 | |
i+=5; | |
//當增加的半徑大於70時(為了讓圓的直徑停在300) 停止動作 這裡我有很大的問題 | |
if(i>=70){ | |
clearInterval(time1); | |
ctx.clearRect(startX-150,startY-150,startX+150,startX+150); | |
} | |
} | |
</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment