1.移动坐标空间
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script lang="javascript">
window.οnlοad=function(){
draw();
}
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("moveSpace").getContext("2d");
ctx.translate(80,80);
for(var i=1;i<10;i++){
ctx.save();
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}
</script>
</head>
<body>
<div id="div1">
<canvas id="moveSpace" width="700" height="300"></canvas>
</div>
</body>
</html>
2.图形变换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="imageChage" style="border: 1px solid;" width="300"
height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("imageChage");
if (c.getContext) {
var context = c.getContext("2d");
//开始绘制长方形
context.fillStyle = "blue";
context.strokeStyle = "red";
context.fillRect(20, 20, 100, 100);
context.strokeRect(20, 20, 100, 100);
context.fill();
context.stroke();
//保存当前canvas状态
context.save();
//绘制另一个矩形
//context.globalCompositeOperation= "source-over";
context.fillStyle = "yellow";
context.strokeStyle = "green";
context.strokeRect(140, 20, 100, 100);
context.fillRect(140, 20, 100, 100);
context.fill();
context.stroke();
///恢复第一个矩形的状态
context.restore();
//绘制两个矩形
context.fillRect(20, 140, 50, 50);
context.strokeRect(80, 140, 50, 50);
}
</script>
</body>
</html>
3.清空画布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function clearMap(){
context.clearRect(0,0,200,200);
}
</script>
</head>
<body>
<canvas id="drawTriangle" style="border:1px solid;" width="200" heigth="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("drawTriangle");
if(c.getContext){
var context = c.getContext("2d");
context.strokeStyle="#FF00FF";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();
}
</script>
<br />
<input name="" type="button" value="清空画布" οnclick="clearMap()"/>
</body>
</html>
<!-- <script type="text/javascript">
var c = document.getElementById("drawTriangle");
if(c.getContext){
var context = c.getContext("2d");
context.fillStyle="#FF00FF";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.fill();
}
</script> -->