<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function drawTop(ctx,fillStyle){
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
function drawGrip(ctx){
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function draw(){
var ctx = document.getElementById('myCanvas').getContext("2d");
// 注意所有的移动都是基于这个上下文
ctx.translate(150,150);
for(var i=1;i<9;i++){
ctx.save();
// 设置旋转
ctx.rotate(Math.PI*(2/4+i/4));
// 设置偏移
ctx.translate(0,-100);
// 设置缩放
ctx.scale(1*(i/8),1*(i/8));
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}
window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>
html5 canvas学习--移动坐标和旋转坐标
最新推荐文章于 2024-06-30 12:42:30 发布