canvas绘图详解（一）
2017-07-21 本文已影响0人
梨_lalala
一、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>
效果如图所示：
image.png
如果想连接图形的首尾，绘制一个封闭的图形，有两种做法
- 再使用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>
效果如图所示：
image.png
- rect(x,y,width,height):从点x,y绘制一个矩形
使用方法和上面的类似，不过多介绍。
