Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/html5 canvas draw with rotate

Created October 21, 2010 15:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fillano/638707 to your computer and use it in GitHub Desktop.
Save fillano/638707 to your computer and use it in GitHub Desktop.
Download ZIP
示範繪圖加上旋轉的效果
Raw
html5 canvas draw with rotate
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<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>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
var ctx = $('#canvas')[0].getContext('2d');
var drawing = false;
var oldPos = [0,0];
function drawLine(oldPos, newPos) {
ctx.save();
ctx.beginPath();
ctx.moveTo(oldPos[0], oldPos[1]);
ctx.lineTo(newPos[0], newPos[1]);
ctx.closePath;
ctx.stroke();
ctx.restore();
}
var seq = [
function(){
ctx.save();
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.fillRect(280,200,80,80);
},
function(){
ctx.rotate(-Math.PI/18);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(Math.PI/18*2);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(-Math.PI/18*3);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(Math.PI/18*4);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(-Math.PI/18*5);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(Math.PI/18*6);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(Math.PI/18);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.rotate(Math.PI/18);
drawLine([280,200],[360,280]);
drawLine([360,200],[280,280]);
},
function(){
ctx.restore();
ctx.rect(270,190,100,100);
ctx.stroke();
}
];
var count = 0;
var tid = setInterval(function(){
seq[count]();
count++;
if(count>=seq.length) {
clearInterval(tid);
}
}, 1000);
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="640" height="480"></canvas></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment