什么是canvas?
canvas是HTML5中一个非常重要的元素,它提供了一些方法让我们可以在页面上去进行绘画、制作动画效果以及交互效果,更高级的可以用来实现游戏效果、对图片进行处理。 万丈高楼平地起,在实现炫酷的效果之前,让我们先来看如何利用canvas去绘制一些简单的图形。
如何创建一个canvas
创建canvas有两种方式,先来看看第一种方式是如何创建的
方式一:通过js获取canvas标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
context.fillRect(100, 100, 300, 300) //fillRect(pointX,pointY,width,height)
</script>
</body>
</html>
- 在HTML中的body标签内编写一个canvas标签
- 在script标签中通过document.getElementById获取到canvas标签
- 通过canvas.getContext('2d')获取canvas画笔
- 调用fillRect()方法,绘制一个方形
以上代码的执行结果:
方式二:通过js创建canvas元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
</head>
<body>
<script>
const canvas = document.createElement('canvas')
canvas.width = 500
canvas.height = 300
document.body.appendChild(canvas)
const context = canvas.getContext('2d')
context.fillRect(100, 100, 250,250)
</script>
</body>
</html>
以上代码同样是绘制一个方形,效果如上图所示。 到这里,canvas的两种创建方式就介绍完毕,接下来将使用canvas绘制一条直线
使用canvas绘制直线
在绘制直线直线,先来回顾一下如何使用js创建canvas
<script>
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContent('2d');
ctx.moveTo(100,100);
ctx.lineTo(300,200);
ctx.stroke()
</script>
通过以上js代码,可以创建一个canvas元素并且将canvas添加到body中,其中需要注意的是:
- ctx.moveTo(x,y) 用来指定所绘制的直线的起点
- ctx.lineTo(x,y) 用来指定直线的起点以及终点
- 调用ctx.stroke()方法,对直线进行绘制后,就可以在页面上看到,如下图:
到这里,canvas的两种创建方式以及如何绘制一个方形,如何绘制一条直线就很轻松的完成了。
使用canvas绘制折线
绘制完了一条直线后,我们再来看看如何使用canvas去绘制一条折线 1.通过js去创建canvas标签,并添加到body中 2.使用moveTo方法指定起点 3.使用lineTo方法指定直线的起终点 4.使用stroke方法,完成绘制
<script>
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(300, 120);
ctx.lineTo(400, 200);
ctx.lineTo(500, 100);
ctx.stroke();
</script>
执行以上代码,你就能得到如下图的效果:
小结
看到这里,简单了解了一下canvas是什么?如何创建canvas?如何使用canvas进行简单图形的绘制。下一期将介绍如何修改样式