canvas的基本使用
张翰音
1、canvas的定义
canvas 元素是HTML5中使用 JavaScript 在网页上绘制图像的
示例一：基本的创建以及使用canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
canvas {
margin: auto;
background-color: aqua;
/* canvas一般不在style中设置宽高，会造成放大或缩小 */
/* width: 600px;
height: 400px; */
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px"></canvas>
</body>
<script>
//canvas默认宽高是300*150
let myCanvas = document.querySelector('#myCanvas')
//获取一个 绘制上下文
let context = myCanvas.getContext('2d');
//IE以下不兼容，canvas绘制出来的图片是位图
context.rect(100,100,300,40);
//绘制路径
//context.stroke(); //绘制路径，绘制空心 矩形
context.fill(); //填充
context.fillRect(100,150,300,40);
context.strokeRect(100,200,300,40);
//清空矩形区域
context.clearRect(250,150,150,20);
//在做大部分反复的特效的时候，基本上都需要用到这个清空的方法
</script>
</html>
2、canvas使用步骤
1、首先创建canvas元素
<canvas id="myCanvas" width="600" height="400"></canvas>
2、获取canvas元素
let myCanvas = document.querySelector('#myCanvas');
3、使用2D 绘图上下文
let ctx = myCanvas.getContext('2d');
4、绘制图形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形 |
| fillRect() | 绘制填充的矩形 |
| strokeRect() | 绘制无填充的矩形 |
| clearRect() | 矩形内清除指定的区域 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
<script>
let myCanvas = document.querySelector('#myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.rect(100,100,300,40);
//四种设置画笔的颜色
ctx.fillStyle = 'yellow';
// ctx.fillStyle = '#f00';
// ctx.fillStyle = 'rgb(0,255,0)';
// ctx.fillStyle = 'rgba(0,0,255,.5)';
// ctx.fillStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
ctx.strokeStyle = 'black';
// ctx.strokeStyle = '#f00';
// ctx.strokeStyle = 'rgb(0,255,0)';
// ctx.strokeStyle = 'rgba(0,0,255,.5)';
// ctx.strokeStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
ctx.fill();
ctx.stroke();
ctx.fillRect(100,150,300,40);
ctx.strokeRect(100,200,300,40);
//设置线宽lineWidth
ctx.lineWidth = 2;
ctx.strokeRect(100,250,300,40);
ctx.lineWidth = 3;
ctx.strokeRect(99.5,299.5,300,40);
// canvas的边框绘制,是从边框的中心开始绘制
// 因为最小的绘制单位是1px,所以会出现 线宽 0.5的bug的问题
// 所以一般绘制是偶数线宽绘制
// 奇数绘制 也可以相应的减少0.5px
</script>
</html>
五、绘制路径
方法|描述
fill()|填充当前绘图路径
stroke()|绘制已定义的路径
beginPath()|起始一条路径
moveTo()|路径移动到画布中的哪个点
closePath()|创建从移动到的位置点回到起始点的路径
lineTo()|添加一个新点同时在canvas画布中创建当前点到最后指定点的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
background-color: antiquewhite;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px"></canvas>
</body>
<script>
let myCanvas = document.querySelector('#myCanvas');
let cxt = myCanvas.getContext('2d');
cxt.lineWidth = 10;
cxt.strokeStyle = 'red';
//把笔移动到起始位置
cxt.beginPath();
cxt.moveTo(0,100);
cxt.strokeStyle = 'blue';
cxt.lineTo(600,100);
cxt.stroke();
cxt.beginPath()
cxt.moveTo(500,0);
cxt.strokeStyle = 'orange';
cxt.lineTo(500,400);
cxt.stroke();
cxt.beginPath();
cxt.moveTo(0,300);
cxt.strokeStyle = 'black';
cxt.lineTo(600,300);
cxt.stroke();
cxt.beginPath();
cxt.moveTo(100,0);
cxt.strokeStyle = 'magenta';
cxt.lineTo(100,600);
//笔触让浏览器绘制
cxt.stroke();
//strokeStyle会被后边的覆盖，可以加上beginPath做处理
//每次开启路径，要指定 绘制方式（stroke或fill）
//开启路径后，可以隔开与上一个的路径的关系，让 每次绘制 独立开来
//闭合路径
cxt.beginPath();
cxt.moveTo(300,50);
cxt.lineTo(500,100);
cxt.lineTo(100,300);
//自动闭合路径
cxt.closePath();
cxt.stroke();
</script>
</html>
lineJoin属性
可以选择边界连接处的样式
| 属性值 | 描述 |
|---|---|
| miter | 斜接 |
| round | 圆滑 |
| bevel | 折角 |
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
background-color: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px"></canvas>
</body>
<script>
let myCanvas = document.querySelector('#myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.lineWidth = 10;
//边界连接处的样式
//ctx.lineJoin = 'miter';
//ctx.lineJoin = 'round'; //圆滑
ctx.lineJoin = 'bevel'; //折角
//闭合路径
ctx.beginPath();
ctx.moveTo(300,50);
ctx.lineTo(500,100);
ctx.lineTo(100,300);
//自动闭合路径
ctx.closePath();
ctx.stroke();
</script>
</html>
lineCap属性
可以选择端点的样式
| 属性值 | 描述 |
|---|---|
| butt | 默认。向线条的每个末端添加平直的边缘。 |
| round | 向线条的每个末端添加圆形线帽 |
| square | 向线条的每个末端添加正方形线帽 |
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
background-color: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px"></canvas>
</body>
<script type="text/javascript">
let myCanvas = document.querySelector('#myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.lineWidth = 20;
//ctx.strokeStyle = 'red';
ctx.strokeStyle = 'black'
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(500,100);
//端点的样式
ctx.lineCap = 'butt';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(500,200);
//端点的样式
ctx.lineCap = 'round';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(500,300);
//端点的样式
ctx.lineCap = 'square';
ctx.stroke();
</script>
</html>
类似资料：