canvas的定义
canvas 是 HTML5 提供的一个用于展示绘图效果的标签
canvas的基本方法
getContext方法
语法: Canvas.getContext( typeStr )
该方法用于绘制上下文工具.
如果是绘制平面图形使用 ‘2d’ 作为参数, 如果绘制立体图形使用 ‘webgl’
- 使用 ‘2d’ 返回 CanvasRenderingContext2D 类型的对象.
- 使用 ‘webgl’ 返回 WebGLRenderingContext 类型的对象.
moveTo方法
语法: CanvasRenderingContext2D.moveTo( x, y )
- 该方法用于设置绘制起点.
- 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
lineTo 方法
语法: CanvasRenderingContext2D.lineTo( x, y )
- 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
- 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
stroke 方法
语法: CanvasRenderingContext2D.stroke()
- 该方法用于连线, 将描述的所有点按照指定顺序连接起来.
绘制一条直线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
//备注:canvas画布的左上角顶点是坐标原点(0,0),
// 从原点往右是x轴的正方向,
// 从原点往下是y轴的正方向
//1、获取canvas标签
var canvas=document.querySelector("canvas");
//2、获取上下文:提供了一系列的绘图工具
var ctx=canvas.getContext("2d");
// ctx是CanvasRenderingContext2D构造函数的实例
//3、指定一个起点
ctx.moveTo(50,50);
//4、从起点到终点拉一条直线
ctx.lineTo(150,150);
//5、描边
ctx.stroke();
</script>
</html>
绘制一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
//起始点设置为(50,50)
ctx.moveTo(50,50);
//从起始点移动到点(50,200)
ctx.lineTo(50,200);
//移动到点(200,200)
ctx.lineTo(200,200);
//移动到点(50,50)
ctx.lineTo(50,50);
//设置绘制样式
ctx.strokeStyle="blue";
//描边
ctx.stroke();
</script>
</html>
fill和fillStyle方法
语法: CanvasRenderingContext2D.fill()
描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.
填充一个矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//绘制一个矩形框
ctx.moveTo(50,50);
ctx.lineTo(250,50);
ctx.lineTo(250,200);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
//设置描边颜色为red
ctx.strokeStyle="red";
//开始描边
ctx.stroke();
//产生一个填充的矩形
//指定填充的颜色pink
ctx.fillStyle="pink";
//填充矩形
ctx.fill();
</script>
</html>
非零环绕
对于路径中指定范围区域,从该区域内部画一条足够长的线段,使此线段的完全落在路径范围之外
绘制一个中空的矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//指定外边的矩形的轨迹
ctx.moveTo(50,50);
ctx.lineTo(250,50);
ctx.lineTo(250,200);
ctx.lineTo(50,200);
//指定内边的矩形的轨迹
ctx.moveTo(70,70);
ctx.lineTo(70,150);
ctx.lineTo(200,150);
ctx.lineTo(200,70);
//填充
ctx.fill();
</script>
</html>