Canvas
Canvas
基本概念
canvas元素
因为JavaScript在HTML5之前缺乏实现复杂动画和几何图形的绘制技术,在HTML5 新增了 canvas 元素,使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建丰富的图形引用。canvas绘图技术利用HTML5提供的<canvas>
作为画布,利用JavaScript配套的api来实现绘制几何图形、绘制图形,配合JavaScript 定时器可以实现复杂动画。
画布
页面上可以使用<canvas> </canvas>
来充当"画布"的角色。对于页面,canvas就是一个普通的行内标签。canvas标签本身提供了width、height属性来设置"画布"的尺寸大小。
不要用CSS设置尺寸,css只是设置canvas在屏幕的显示大小,使用css设置画布的大小会导致画布按比例缩放你设置的值。在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值(width:300px,height:150px)。
<canvas width="1000" height="300"> </canvas>
画笔
JavaScript会针对每个画布都会提供一个专属的"画笔"。在程序中,画笔会作为一个对象存在,该对象提供了一系列的API用于进行绘制操作。该画笔是原生提供,不能用jQuery进行操作。
//先获取画布标签
var canvas = document.querySelector('CSS选择器');
var 画笔变量名 = canvas.getContext('2d');
//通过画笔来进行绘制
画笔变量名.函数名();
canvas绘图的一般流程
- 在页面上设置画布:
<canvas></canvas>
。 - 在JavaScript中获取画笔。
- 利用画笔提供的api来进行绘图操作,画笔获取一次即可重复使用。
- 调用
beginPath()
开启绘制路径 - 调用
moveTo
确定画笔的绘制位置 - 调用
lineTo
或arc
来勾勒子路径 - 调用
closePath()
来闭合子路径 - 调用
stroke()
绘制路径,显示在页面上
- 调用
canvas中的坐标系
以画布的左上角为原点,向右x轴为正,向下y轴为正。
canvas 路径
- 路径:是一条闭合的线条,一般一个路径是由几条子路径构成。
- 子路径:是一个具体的线条,几条子路径进行连接闭合,就形成了一条完整的路径。
- canvas是通过
beginPath()
来表示开始绘制新的路径,closePath
会将目前已绘制的子路径进行闭合,形成一条完整的路径。 - 在
beginPath
以及closePath
之间进行绘制子路径。当绘制完最后一条子路径后,调用closePath
,会自动将第一条子路径的起点和最后一条子路径的终点进行链接,形成一条完整的路径。
绘图操作
基本操作
beginPath()
:开启绘制一条路径。closePath()
:关闭当前绘制的路径,会将该条路径进行闭合。
绘制几何图形
-
moveTo(x,y)
:将画笔移动到指定坐标。 -
lineTo(x,y)
:勾勒出一条直线(子路径),直线的起点就是画笔的位置,终点就是指定的x和y坐标。如果需要显示该条子路径,需要调用stroke()
来进行真正的绘制子路径。 -
stroke()
:绘制当前已经勾勒出的子路径。 -
strokeStyle
:设置线条的颜色。 -
lineWidth
:设置线条的粗细,即宽度。 -
fill()
:对图形进行填充。 -
fillStyle
:设置填充颜色。var canvas = document.querySelector('css选择器'); var 画笔变量名 = canvas.getContext('2d'); 画笔变量名.strokeStyle = "颜色"; 画笔变量名.lineWidth = "5"; 画笔变量名.fill(); 画笔变量名.fillStyle = "pink";
-
arc
:勾勒一段曲线。画笔变量名.arc(圆心的x坐标, 圆心的y坐标, 半径, 开始角度, 结束角度, 是否逆时针绘制); //例子:以100,100 半径为5生成4分之1圆,从0度到90度 var canvas = document.querySelector('#demo'); var ctx = canvas.getContext('2d'); ctx.arc(100, 100, 5, 0, Math.PI/2); //默认顺时针
其他常用API
-
clearRect
:清理画布中的指定区域,即清理绘制痕迹。画笔变量名.clearRect(清理区域的左上角x坐标, 清理区域的左上角y坐标, 清理区域的宽度, 清理区域的高度); //例子:清理整个画布,假设画布变量是canvas ctx.clearRect(0, 0, canvas.width, canvas.height)
实例
粒子动画
主要思路
利用随机圆心位置批量生成小圆,然后利用定时器不断改变每个小圆点的圆心位置,达到随机移动的目的。再判断两个点的圆心是否小于指定的一个数字,针对这两个点的圆心来绘制线条。给鼠标设置移动事件,保存鼠标移动的x和y坐标,以此为圆心,指定一个半径。判断所有的点,是否是在这个圆以内,如果是,则以两个点的圆心为坐标生成线条。
随机点绘制
每个点需要使用一个原生对象来保存,并把所有的点保存到数组中,统一绘制。
点随机移动
随机移动的原理就是不断的改变点的圆心位置。利用定时器不断的绘制(清屏)。边界的判断:点移动范围不能超过边界,再移动之前对当前点的位置进行判断,如果超出指定范围,那么就速度取反。
绘制两点间线条
- 思路:如果两个点之间的距离小于指定值,那么就针对这两个点进行连线。
- 实现:创建一个函数,需要传入一个点对象。里面遍历整个dots数组,判断遍历的点和传入的点的距离是否小于指定值,如果小于,则用画笔进行连线。
设置鼠标移动事件,规定线条生成范围
对鼠标设置move事件,获取鼠标的x和y坐标。然后指定一个半径,表示以鼠标为圆心的一个圆。处于该圆以内的两个点进行连线。(实际上就是在第三阶段的函数中额外再加一个判断条件,即点在该圆内(与圆心的距离小于半径))。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库