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绘图的一般流程

  1. 在页面上设置画布:<canvas></canvas>
  2. 在JavaScript中获取画笔。
  3. 利用画笔提供的api来进行绘图操作,画笔获取一次即可重复使用。
    1. 调用beginPath()开启绘制路径
    2. 调用moveTo确定画笔的绘制位置
    3. 调用lineToarc来勾勒子路径
    4. 调用closePath()来闭合子路径
    5. 调用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坐标。然后指定一个半径,表示以鼠标为圆心的一个圆。处于该圆以内的两个点进行连线。(实际上就是在第三阶段的函数中额外再加一个判断条件,即点在该圆内(与圆心的距离小于半径))。

posted @   AncilunKiang  阅读(79)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示