Canvas API前景 应用极为广阔,它能在网页中国创建一块矩形区域,这块区域称为画布,可以在其中绘制各种图形!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid ;" width="200" height="200">
您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
</canvas>
<canvas id="myCanvas2" style="border:1px solid ;" width="200" height="150">
您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
</canvas>
<canvas id="myCanvas3" style="border:1px solid ;" width="200" height="150">
您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var c2=document.getElementById("myCanvas2");
var c3=document.getElementById("myCanvas3");
var context=c.getContext("2d");
var context2=c2.getContext("2d");
var context3=c3.getContext("2d");
// context.fillStyle="aquamarine";//填充色
// context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形
// context.fillText("你好",60,60,100);//填充出来的文字
// if(c.getContext){//检测浏览器的支持
// alert("您的浏览器支持Canvas!");
// }else{
// alert("您的浏览器不支持Canvas!");
// }
//1.绘制直线moveTo() lineTo() strokeStyle stroke()
context.moveTo(0,0);
context.lineTo(150,150);
context.strokeStyle="red";
context.strokeStyle="#000000";
context.strokeStyle="rgb(255,0,0,1)";
context.stroke();
//2.绘制矩形 fillStyle fillRect() 或strokeStyle strokeRect()
context.fillStyle="aquamarine";//填充色
context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形
context.strokeStyle="#ffffff";//轮廓的颜色
context.strokeRect(60,60,100,80);//绘制的轮廓矩形
//3.绘制弧线(圆形)fillStyle beginPath() arc() closePath() fill()
context.fillStyle="#FF00FF";
context.beginPath();//开始绘制路径
context.arc(100,100,50,0,Math.PI*2,true);//x,y,r,startAngle(弧度0),endAngle(弧度2π),anticlockwise(true为按逆时针方向绘制)
context.closePath();//结束绘制路径
context.fill();//填充
for(var i=0;i<15;i++){
context2.strokeStyle="#FF00FF";
context2.beginPath();
context2.arc(0,150,i*10,0,Math.PI*3/2,true);
// context2.closePath();//这只需要弧线,不需要闭合的连线,因此不需要句
context2.stroke();
}
//4.,绘制路径的方式可以自由绘制其他形状,如绘制三角形
context3.fillStyle="red";
context3.strokeStyle="black";
context3.beginPath();
context3.moveTo(50,50);
context3.lineTo(100,50);
context3.lineTo(50,100);
context3.closePath();
context3.fill();
context3.stroke();
</script>
</body>
</html>
清空画布:context.clearRect(x,y,width,height);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function clearMap(){
context.clearRect(0,0,300,200);//注意,清空的是画布里的内容,并不是画布本身
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context = c.getContext('2d');
context.strokeStyle="#FF00FF";
context.beginPath();
context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
context.stroke();
</script>
<br/>
<input type="button" name="" value="清空画布" οnclick="clearMap()" />
</body>
</html>