一、canvas绘图环境
<canvas id="canvas" width="800" height="800">该浏览器不支持canvas元素</canvas>
在<body></body>中添加这段代码相当于创建了一块画布,要使用<canvas>元素,必须为其设置画布大小,写在<canvas></canvas>标签内的内容将在使用的浏览器不支持<canvas>时显示。想要绘图,还必须获得绘图上下文,
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
二、路径绘制
- moveTo(x,y) 将绘制坐标移到(x,y),但不进行画线。
lineTo(x,y)从上一点开始,绘制直线到(x,y)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画线</title>
<style type="text/css">
#canvas
{
display: block;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width="600";
canvas.height="600"
var context=canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(500,500);
context.lineTo(100,500);
context.lineWidth=5; //设置画线宽度
context.strokeStyle="#058"; //设置画线的颜色
context.stroke(); //正式进行画线
}
</script>
</body>
</html>
效果如图所示:
如果想连接图形的首尾,绘制一个封闭的图形,有两种做法
- 再使用context.lineTo(start,end);连接图形的首尾坐标。
- 使用beginPath()和closePath()也将实现同样的效果。对于实现封闭图形很有用。
context.beginPath();
context.moveTo(100,100);
context.lineTo(500,500);
context.lineTo(100,500);
context.closePath();
- arc(x,y,radius,startAngle,endAngle,direction)以(x,y)为圆心,画一条弧线。direction为true为逆时针方向绘制,为false表示为顺时针绘制,如果不进行设定,默认为true。无论顺时针还是逆时针,正右方都为0弧度,正下方为 PI/2,正左方为PI.正上方为PI/2*3;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画线</title>
<style type="text/css">
#canvas
{
display: block;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width="600";
canvas.height="600"
var context=canvas.getContext("2d");
context.arc(200,200,50,0,Math.PI,false)
context.lineWidth=5;
context.strokeStyle="#058";
context.stroke();
}
</script>
</body>
</html>
效果如图所示:
- rect(x,y,width,height):从点x,y绘制一个矩形
使用方法和上面的类似,不过多介绍。