1.Canvas 简介
HTML5 中的 Canvas :我们可以称它为“网页中的画布”。默认情况下,Canvas 是一块 300px*150px 的矩形画布,用户可以自定义画布的大小或为画布添加其他属性。
利用 Canvas 实现绘画:Canvas 并不是通过鼠标绘画的,而是用户需要通过 JavaScript 来控制画布中的内容,例如添加图片、线条、文字等。
2, 使用 Canvas 绘制图形
2.1 <canvas> 标签
使用 HTML5 中的 <canvas> 标签在网页中创建一个画布,语法格式如下:
<canvas id="canvas" width="400" height="300"> 您的浏览器不支持canvas标签,请更新浏览器 </canvas>
上述代码定义了一个 id 为 canvas 的画布,并设置了画布的宽度为 400px,高度为 300px。
通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象,代码如下所示:
var canvas = document.getElementById("canvas");
上述代码获取了 id 为 canvas 的画布,同时将获取的画布对象保存在变量 canvas 中。
context 对象:是画布的上下文,也叫做绘制环境,是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得,代码如下所示:
var context = canvas.getContext('2d');
2d:代表一个平面,绘制图形时需要在平面上确定起始点,也就是“从哪里开始画”,这个点需要通过坐标来控制。
Canvas 的坐标系:从最左上角 0,0
开始。x 轴向右逐渐增加,y 轴向下逐渐增加。
3.2 绘制线条
线的定义:线是所有复杂图形的组成基础,想要绘制复杂的图形,首先要从绘制线开始。
线的组成:在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成,分别为初始位置、连线端点以及描边。
初始位置:在绘制图形时,我们首先需要确定从哪里下“笔”,这个下“笔”的位置就是初始位置。
在画布中使用 moveTo(x, y) 方法来定义初始位置,其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置,中间用 ,
隔开。x 和 y 的取值为数字,表示像素值(单位省略)。
context.moveTo(x, y);
连线端点:在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似,连线端点也需要定义 x 和 y 的坐标位置。
context.lineTo(x, y);
描边:通过初始位置和连线端点可以绘制一条线,但这条线并不能被看到。这时我们需要为线添加描边,让线变得可见。
使用画布中的 stroke() 方法,可以实现线的可视效果。
context.stroke();
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制字母M</title> </head> <body> <canvas id="canvas" width="400" height="300"> 您的浏览器不支持canvas标签,请更新浏览器 </canvas> </body> </html>
步骤二:绘制字母 M:
<script> var canvas = document.getElementById('canvas'); // 获取canvas标签 var context = canvas.getContext('2d'); // 获得context对象 context.moveTo(10,100); // 定义初始位置 context.lineTo(30,10); // 定义连接线端点 context.lineTo(50,100); // 定义连接线端点 context.lineTo(70,10); // 定义连接线端点 context.lineTo(90,100); // 定义连接线端点 context.stroke(); // 描边 </script>
3.3 设置线条的样式
设置线条宽度:使用 lineWidth 属性可以定义线的宽度,该属性的取值为数值(不带单位),以像素为计量。
context.lineWidth = 10;
以上代码设置了线的宽度为 10px。
设置描边颜色:使用 strokeStyle 属性可以定义线的描边颜色,该属性的取值为十六进制颜色值或颜色的英文名。
context.strokeStyle = '#f00'; context.strokeStyle = 'red';
设置端点形状:默认情况下,线的端点是方形的,通过 lineCap 属性可以改变端点的形状。
context.lineCap = 'round'; // 设置圆形端点
除了执行 stroke() 方法根据路径进行描边,还可以使用 fill() 方法进行图形的填充,示例代码如下:
context.fill();
同理也可以使用 fillStyle 属性可以定义路径的填充颜色,该属性的取值为十六进制颜色值或颜色的英文名,示例代码如下:
context.fillStyle = 'green';
3.3 设置线条的路径
路径的定义:路径是所有图形绘制的基础,通过初始位置和连线端点即可创建一条路径。
路径的状态:
-
重置路径
-
闭合路径
在同一画布中,即使我们添加再多的连线端点也只能有一条路径,如果想要开始新的路径就需要使用beginPath()方法,当出现beginPath()时即表示路径重新开始。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="400" height="3000"> 您的浏览器不支持canvas标签,请更新浏览器 </canvas> </body> </html>
步骤二:重置路径
<script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.moveTo(10,10); // 定义初始位置 context.lineTo(300,10); // 定义链接端点 context.lineWidth=5; // 设置线的宽度 context.strokeStyle='red'; // 设置线的颜色 context.stroke(); // 描边 context.beginPath(); // 重置路径 context.moveTo(10,60); // 定义初始位置 context.lineTo(300,60); // 定义链接端点 context.lineWidth=10; // 设置线的宽度 context.strokeStyle='green'; // 设置线的颜色 context.stroke(); // 描边 </script>
闭合路径的概念:
闭合路径就是将我们绘制的开放路径进行封闭处理,多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。
示例代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="400" height="300"> 您的浏览器不支持canvas标签,请更新浏览器 </canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.moveTo(10,10); context.lineTo(10,100); context.lineTo(100,100); context.closePath(); // 闭合路径 context.stroke(); </script> </body> </html>
① 创建画布:<canvas></canvas>
② 准备画笔(获取上下文对象):canvas.getContext(‘2d’);
③ 开始路径规划 :context.beginPath();
④ 移动起始点 :context.moveTo(x, y);
⑤ 绘制线(矩形、圆形、图片…):context.lineTo(x, y);
原文地址:https://blog.csdn.net/m0_67883007/article/details/128377360
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_41412.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!