前端使用Canvas绘图(基础知识)--持续更新中

已于 2023-05-11 22:35:34 修改
阅读量10w+ 收藏 6
点赞数 3
分类专栏： 前端知识 前端面试题 html 文章标签： 前端 javascript
于 2023-04-09 00:54:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stc_ljc/article/details/130000947
版权
🍿*★,°*:.☆(￣▽￣)/$:*.°★* 🍿
🍟欢迎来到前端初见的博文，本文主要讲解前端使用Canvas绘图基础知识)🍟
👨‍🔧 个人主页 : 前端初见
🥞喜欢的朋友可以关注一下，下次更新不迷路🥞

文章目录

)

前言

在这里插入图片描述

身为一个前端开发人员,肯定都是想开发出炫酷的应用程序，可以有很多动画特效，例如黑客帝国的数字，彩色炫酷的粒子动效，也可以实现各种面板，让页面特别秀！接下来这篇文章就是让大家了解和使用canvas在项目中开发和应用。
因为是工作之余才有时间写文章，更新可能都在晚上，觉得有用的可以先收藏，我会按时更新,学习成长的路上本就孤单，在之后的路上也希望大家多多支持和陪伴，我会尽我所能产出一些对大家有益的文章

canvas文档

前端使用Canvas绘图文章代码仓库地址
Canvas 教程
Context2D属性文档

一、canvas代码提示（插件和注释）

canvas的代码提示可以使用vscode的插件去进行提示i，也可以使用注释的方式，个人推荐使用插件，因为插件安装后即可使用，使用注释方式每次都需要添加注释代码再去提示，插件相对来说更友好一点。

1.1、使用插件方式(推荐这种方式) =>canvas-snippets

在这里插入图片描述
安装完成后，这样就有canvas的代码提示了
在这里插入图片描述

1.2、使用注释方式

   //在js代码中添加洗面粉注释即可自动补全canvas 代码
   /** @type {HTMLCanvasElement} */

在这里插入图片描述

二、初始canvas

2.1、什么是canvas

  • canvas中文名叫 “画布”，是 HTML5 新增的一个标签
  • canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
  • Canvas 在某些情况下可以 “代替” 图片。
  • Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。
  • Canvas 允许开发者通过 JS在这个标签上绘制各种图案。

2.2、 canvas 标签

提供了绘制2D 的图形接口和上下文。
参数:

  • id:标识元素的唯一性
  • width:画布的宽度
  • height:画布的高度
    代码
<!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>
  <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
  <canvas id="canvas1" width="1920px" height="400px">
    <!-- 画布 -->
  </canvas>
  <script>
    // 1.获取画布
    let canvas1=document.getElementById('canvas1')
    // 2.获取画笔，上下文对象，用于画画用
    let ctx=canvas1.getContext('2d')
    // 3.绘制图形
    // 绘制一个矩形  fillRect(位置x，位置y，宽、高)
    ctx.fillRect(100,100,300,300);
  </script>
</body>
</html>

效果:
在这里插入图片描述

三、canvas上下文对象与游览器支持

3.1、 canvas上下文对象getContext

    console.log(document.body)
    console.log(document.body.getContext)
    console.log(canvas1.getContext)

在这里插入图片描述

3.2、画笔对象getContext

    // 1.获取画布
    let canvas1=document.getElementById('canvas1')
    let ctx=canvas1.getContext('2d')
    console.log(ctx)

在这里插入图片描述

3.3、canvas游览器支持

通过获取getContext上下文对象可以判断当前游览器是否支持canvas，如果不支持可以打印输出出来，我们canvas也就成了普通标签，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>
  <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
  <canvas id="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1=document.getElementById('canvas1')
    // 判断是否有getContext
    if(!canvas1.getContext){
      console.log('当前游览器不支持canvas。请下载最新的游览器')
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx=canvas1.getContext('2d')
    // 3.绘制图形
    // 绘制一个矩形  fillRect(位置x，位置y，宽、高)
    ctx.fillRect(100,100,300,300);
    
  </script>
</body>
</html>

四、canvas绘制基本图形

我们在绘制矩形时，设置了坐标和大小，有了坐标我们就能在画布的的那个位置绘制什么样式的图形，接下来我们可以深入了解如何在 canvas 上绘制。学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做

4.1、canvas矩形绘制

4.1.1、canvas矩形绘制(填充模式)

填充模式也就是我们上面实现的那种
使用fillRect进行填充
fillRect属性：

    // 绘制一个矩形  fillRect(位置x，位置y，宽、高)
    ctx.fillRect(100,100,300,300);
     // fillRect拆开写法
    ctx.rect(00,100,300,300)
    ctx.fill()

完整代码：

<!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="canvas1" width="1920px" height="400px">
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1=document.getElementById('canvas1')
    // 判断是否有getContext
    if(!canvas1.getContext){
      console.log('当前游览器不支持canvas。请下载最新的游览器')
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx=canvas1.getContext('2d')
    // 3.绘制图形
    // 绘制一个矩形  fillRect(位置x，位置y，宽、高)
    ctx.fillRect(100,100,300,300);

	// fillRect拆开写法
    // ctx.rect(00,100,300,300)
    // ctx.fill()
  </script>
</body>
</html>

效果：
在这里插入图片描述

4.1.2、canvas矩形绘制(路径模式)

使用strokeRect进行路径绘制
strokeRect属性：

    // ctx.strokeRect(位置x，位置y，宽、高)
    ctx.strokeRect(100, 100, 400, 200);

	// strokeRect拆开写法
    ctx.rect(100, 100, 400, 200)
    ctx.stroke()

完整代码：

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1=document.getElementById('canvas1')
    // 判断是否有getContext
    if(!canvas1.getContext){
      console.log('当前游览器不支持canvas。请下载最新的游览器')
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx=canvas1.getContext('2d')
    // 3.绘制图形
    // 路径绘制矩形  
    // ctx.strokeRect(位置x，位置y，宽、高)
    ctx.strokeRect(100, 100, 400, 200);
  </script>
</body>
</html>

效果：
在这里插入图片描述

4.1.3、canvas矩形绘制(清除模式)

绘制并清除矩形:

    // 清除方式绘制矩形
    // beginPath和closePath可以完成路径的分段
    ctx.beginPath();
    // rect绘制路径
    ctx.rect(100, 100, 200, 100);
    // stroke显示路径
    ctx.stroke();
    // 画笔结束
    ctx.closePath();

    // 画笔开始
    ctx.beginPath();
    ctx.rect(200, 150, 200, 100);
    // fill填充
    ctx.fill();
    // 画笔结束
    ctx.closePath();

完整代码：

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制图形

    // 清除方式绘制矩形
    // beginPath和closePath可以完成路径的分段
    ctx.beginPath();
    // rect绘制路径
    ctx.rect(100, 100, 200, 100);
    // stroke显示路径
    ctx.stroke();
    // 画笔结束
    ctx.closePath();

    // 画笔开始
    ctx.beginPath();
    ctx.rect(200, 150, 200, 100);
    // fill填充
    ctx.fill();
    // 画笔结束
    ctx.closePath();

    let height = 0;
    // 把矩形部分清除
    let t1 = setInterval(() => {
      height++;
      ctx.clearRect(0, 0, canvas1.clientWidth, height);
      if (height > canvas1.clientHeight) {
        clearInterval(t1);
      }
    }, 10);
  </script>
</body>

</html>

效果：

在这里插入图片描述

4.2、canvas绘制圆弧与笑脸

绘制圆弧或者圆，我们使用arc0方法。当然可以使用arcTo0，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。

4.2.1、绘制圆形

使用strokeRect进行绘制

arc属性：

    // ctx.arc(圆心x坐标，圆心y坐标，半径,开始角度，结束角度，顺/逆时针,第六个参数(可选的)设置true则是逆时针)
    //ctx.context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);
    ctx.strokeRect(100, 100, 400, 200);

	// strokeRect拆开写法
    ctx.arc(300, 200, 100,0,Math.PI*2);
    // fill填充
    ctx.fill();

完整代码:

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制圆形
    // arc绘制圆弧的方法
    // ctx.arc(圆心x坐标，圆心y坐标，半径,开始角度，结束角度，顺/逆时针)
    ctx.arc(300, 200, 100,0,Math.PI*2);
    // fill填充
    ctx.fill();
  </script>
</body>

</html>

效果
在这里插入图片描述

4.2.2、绘制半圆
    // arc绘制圆弧的方法
    // ctx.arc(圆心x坐标，圆心y坐标，半径,开始角度，结束角度，顺/逆时针)
    ctx.arc(300, 200, 100,0,Math.PI);
    // fill填充
    ctx.fill();

效果
在这里插入图片描述

4.2.3、绘制笑脸(方法一)

繁琐版代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制笑脸

    // 绘制脸部
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2);
    ctx.stroke();
    ctx.closePath();
 
    // 绘制嘴巴
    ctx.beginPath();
    ctx.arc(75, 75, 35, 0 , Math.PI );
    ctx.stroke();
    ctx.closePath();

    // 绘制眼睛(左)
    ctx.beginPath();
    ctx.arc(60,65,5,0,Math.PI*2)
    ctx.stroke();
    ctx.closePath();
    
    // 绘制眼睛(右)
    ctx.beginPath();
    ctx.arc(90,65,5,0,Math.PI*2)
    ctx.stroke();
    ctx.closePath();
    // stroke路径
    ctx.stroke();
    
  </script>
</body>

</html>

效果在这里插入图片描述

4.2.3、绘制笑脸(方法二)

使用move.To移动点绘制笑脸
moveTo可以用来绘制一条不连续的路径
完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制笑脸

    // 绘制脸部
    ctx.arc(75,75,50,0,Math.PI*2);
    // moveTo可以用来绘制一条不连续的路径
    ctx.moveTo(110, 75);
    // 绘制嘴巴
    ctx.arc(75, 75, 35, 0 , Math.PI );
    ctx.moveTo(65, 65);
    // 绘制眼睛(左)
    ctx.arc(60,65,5,0,Math.PI*2)
    ctx.moveTo(90, 65);
    // 绘制眼睛(右)
    ctx.arc(90,65,5,0,Math.PI*2)
    // stroke路径
    ctx.stroke();
    
  </script>
</body>

</html>

效果
在这里插入图片描述

4.3、canvas绘制折线线段

4.3.1、绘制线段

绘制直线，需要用到的方法lineTo。开始点也可以通过moveTo0函数改变。
完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制线段
    ctx.beginPath();
    ctx.moveTo(300 ,300);
    ctx.lineTo(350, 350);
    ctx.stroke();
    ctx.closePath();
  </script>
</body>

</html>

效果
在这里插入图片描述

4.3.1、绘制三角形(路经版和填充版)

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制三角形
    // 路经版
    ctx.beginPath();
    ctx.moveTo(300 ,200);
    ctx.lineTo(350, 250);
    ctx.lineTo(350,200)
    ctx.lineTo(300,200)
    ctx.stroke();
    ctx.closePath();

    // 填充版
    ctx.beginPath();
    ctx.moveTo(200 ,100);
    ctx.lineTo(250, 150);
    ctx.lineTo(250,100)
    ctx.lineTo(200,100)
    ctx.fill();
    ctx.closePath();
  </script>
</body>
</html>

效果
在这里插入图片描述

4.4、arcTo方法绘制圆弧方式

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制圆弧
    ctx.beginPath();
    // 设置第一个点
    ctx.moveTo(300, 200);
    //设置第二个点和第三个点，以及圆弧半径  
    ctx.arcTo(300, 250, 250, 250, 50);
    ctx.stroke();
    ctx.closePath();
    
  </script>
</body>

</html>

效果
在这里插入图片描述

4.5、二次贝塞尔曲线实现聊天气泡框

一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
在这里插入图片描述

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(200, 300);
    ctx.quadraticCurveTo(150, 300, 150, 200);
    ctx.quadraticCurveTo(150, 100, 300, 100);
    ctx.quadraticCurveTo(450, 100, 450, 200);
    ctx.quadraticCurveTo(450, 300, 250, 300);
    ctx.quadraticCurveTo(250, 350, 150, 350);
    ctx.quadraticCurveTo(200, 350, 200, 300);
    ctx.stroke();
    btx.closePath();
    
  </script>
</body>

</html>

效果
在这里插入图片描述

4.6、三次贝塞尔曲线实现献给女朋友的爱心

贝塞尔曲线应用于二维图形应用程序的数学曲线。 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
在这里插入图片描述

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // 3.绘制贝塞尔曲线实现爱心
    ctx.beginPath();
    // 移动到起点
    ctx.moveTo(300,200)
    //  2个控制点一个终点(右半心)
    ctx.bezierCurveTo(350, 150,450, 200, 300, 300);
    // 左边心
    ctx.bezierCurveTo(150, 200,250, 150, 300, 200);
    ctx.fillStyle = 'rgb(234, 67, 111)';
    ctx.fill();
  
    btx.closePath();
    
  </script>
</body>

</html>

效果
在这里插入图片描述

4.8、封装路径path2d

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");

    // 封装爱心路径
    var heatPath=new Path2D()
    // ctx.beginPath();
    // 移动到起点
    heatPath.moveTo(300,200)
    //  2个控制点一个终点(右半心)
    heatPath.bezierCurveTo(350, 150,450, 200, 300, 300);
    // 左边心
    heatPath.bezierCurveTo(150, 200,250, 150, 300, 200);
    ctx.fillStyle = 'rgb(234, 67, 111)';
    ctx.fill(heatPath);
    // ctx.closePath(heatPath);
    
    // 封装聊天框路径
    var chatPath=new Path2D()
    chatPath.moveTo(200, 300);
    chatPath.quadraticCurveTo(150, 300, 150, 200);
    chatPath.quadraticCurveTo(150, 100, 300, 100);
    chatPath.quadraticCurveTo(450, 100, 450, 200);
    chatPath.quadraticCurveTo(450, 300, 250, 300);
    chatPath.quadraticCurveTo(250, 350, 150, 350);
    chatPath.quadraticCurveTo(200, 350, 200, 300);
    ctx.stroke(chatPath);

    // 创建折线
    // M 起点10 10  h水平移动80 垂直移动v80 垂直移动-80 z回原点
    var polyline=new Path2D("M 10 10 h 80 v 80 h -80 z")
    ctx.stroke(polyline)
  </script>
</body>

</html>

效果
在这里插入图片描述

五、canvas样式

5.1、样式和颜色控制

在绘制图形的竟节里，我只用到默认的线条和填充样式。接下来，我们将会探讨 anvas 全部的可选项，来绘制出更加吸引人的内容。
strokeStyle轮廓样式和fillStyle填充样式和globalAlpha设置全局透明度

    // globalAlpha设置全局透明度,一般不这样使用
    // ctx.globalAlpha = 0.5;
    // strokeStyle轮廓样式 支持单词、rgb、rgba、十六进制    ctx.strokeStyle='blue';
    ctx.stroke(heatPath)
    // fillStyle填充样式 支持单词、rgb、rgba、十六进制
    ctx.fillStyle = 'rgb(234, 67, 111)';
    ctx.fill(heatPath);

完整代码

<!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="canvas1" width="1920px" height="400px">
    当前游览器不支持canvas。请下载最新的游览器
    <a href="https://www.google.com/intl/zh-CN/chrome/">立即下载新版谷歌游览器</a>
  </canvas>
  <script>
    // 1.获取画布
    let canvas1 = document.getElementById("canvas1");
    // 判断是否有getContext
    if (!canvas1.getContext) {
      console.log("当前游览器不支持canvas。请下载最新的游览器");
    }
    // 2.获取画笔，上下文对象，用于画画用
    let ctx = canvas1.getContext("2d");
    // globalAlpha设置全局透明度,一般不这样使用
    // ctx.globalAlpha = 0.5;
    // 封装爱心路径
    var heatPath = new Path2D()
    // ctx.beginPath();
    // 移动到起点
    heatPath.moveTo(300, 200)
    //  2个控制点一个终点(右半心) 
    heatPath.bezierCurveTo(350, 150, 450, 200, 300, 300);
    // 左边心
    heatPath.bezierCurveTo(150, 200, 250, 150, 300, 200);

    // strokeStyle轮廓样式 支持单词、rgb、rgba、十六进制
    ctx.strokeStyle = 'blue';
    ctx.stroke(heatPath)
    // fillStyle填充样式 支持单词、rgb、rgba、十六进制
    ctx.fillStyle = 'rgba(255, 200,200,0.3)';
    ctx.fill(heatPath);



  </script>
</body>

</html>

效果
strokeStyle轮廓样式
在这里插入图片描述
fillStyle填充样式
在这里插入图片描述
globalAlpha设置全局透明度
在这里插入图片描述

5.2、线性渐变和径向渐变

线性渐变

常用方法

  // 创建线性渐变 createLinearGradient(起点x，起点y，终点x，终点y)
  let lineGradient = ctx.createLinearGradient(0, 0, 600, 400);
  // addColorStop(number, 'color') 从0开始过程中颜色设置从红到粉色
  lineGradient.addColorStop(0, "red");
  lineGradient.addColorStop(1, "pink");

完整代码

<!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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 3.线性渐变和径向渐变
      // 绘制一个矩形  fillRect(位置x，位置y，宽、高)
      // 创建线性渐变 createLinearGradient(起点x，起点y，终点x，终点y)
      let lineGradient = ctx.createLinearGradient(0, 0, 600, 400);

      // addColorStop(number, 'color') 从0开始过程中颜色设置从红到粉色
      lineGradient.addColorStop(0, "red");
      lineGradient.addColorStop(1, "pink");
      // 从红到粉到蓝
      // lineGradient.addColorStop(0, 'red');
      // lineGradient.addColorStop(0.5, 'pink');
      // lineGradient.addColorStop(1, 'blue');
      ctx.fillStyle = lineGradient;
      ctx.fillRect(0, 0, 600, 400);
    </script>
  </body>
</html>

效果
红=>粉线性渐变
在这里插入图片描述
红=>粉=>蓝线性渐变
在这里插入图片描述

封装渲染函数结合请求动画帧实现动画渐变

完整代码

`<!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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 封装渲染函数reader
      let index = 0;

      function reader() {
        // ctx.clearRect(0, 0, 600, 400);
        index += 0.01;
        if (index > 1) {
          index = 0;
          // index大于再从0开始
        }
        let lineGradient = ctx.createLinearGradient(0, 0, 600, 400);
        lineGradient.addColorStop(0, "red");
        lineGradient.addColorStop(index, "pink");
        lineGradient.addColorStop(1, "blue");
        ctx.fillStyle = lineGradient;
        ctx.fillRect(0, 0, 600, 400);
        requestAnimationFrame(reader);
      }
      // requestAnimationFrame请求动画帧;
      requestAnimationFrame(reader);
    </script>
  </body>
</html>

效果
在这里插入图片描述

径向渐变

常用方法

  //createRadialGradient径向渐变
      let radiaGradent=ctx.createRadialGradient(300, 200, 0, 300, 200, 100);

完整代码

<!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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 径向渐变
      let index = 0;
      //createRadialGradient径向渐变
      let radiaGradent=ctx.createRadialGradient(300, 200, 0, 300, 200, 100);
      // 从内到外 红=>粉=>蓝径向渐变
      radiaGradent.addColorStop(0, 'red');
      radiaGradent.addColorStop(0.3, 'pink');
      radiaGradent.addColorStop(1, 'blue');
      ctx.fillStyle=radiaGradent;
      ctx.fillRect(0, 0, 600, 400);
      // requestAnimationFrame请求动画帧;
      // requestAnimationFrame(reader);
    </script>
  </body>
</html>

效果
在这里插入图片描述

使用径向渐变绘制球体效果

完整代码

<!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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 绘制球体

      let radiaGradent=ctx.createRadialGradient( 250, 150, 10,300, 200, 100,);
      // 从内到外 红=>粉=>蓝径向渐变
      radiaGradent.addColorStop(0, 'pink');
      radiaGradent.addColorStop(1, 'red');
      ctx.fillStyle=radiaGradent;
      ctx.arc(300,200,100,0,Math.PI*2)
      ctx.fill();
      // requestAnimationFrame请求动画帧;
      requestAnimationFrame(reader);
    </script>
  </body>
</html>

效果
在这里插入图片描述

5.3、 圆锥渐变

完整代码

<!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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 3.圆锥渐变
      // createConicalGradient(角度，位置x，位置y)
      let coneGradient=ctx.createConicGradient(Math.PI/4,300,200)
      coneGradient.addColorStop(0, 'red');
      coneGradient.addColorStop(0.5, 'blue');
      coneGradient.addColorStop(1, 'pink');
      ctx.fillStyle=coneGradient;
      ctx.fillRect(0,0,600,400);
    </script>
  </body>
</html>

效果
在这里插入图片描述

5.4、 pattern印章填充方式

pattern印章填充方式可以填充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>
    <!-- 
    参数:
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
   -->
    <canvas id="canvas1" width="1920px" height="400px">
      <!-- 画布 -->
    </canvas>
    <script>
      // 1.获取画布
      let canvas1 = document.getElementById("canvas1");
      // 2.获取画笔，上下文对象，用于画画用
      let ctx = canvas1.getContext("2d");
      // 3.圆锥渐变创建图案样式pattern
      var img=new Image()
      img.src='./img/mc.jpg';
      img.onload=function(){
        // 创建图案对象createPattern(Image图片对象也可以是canvas对象, repetition重复方式)
        //repetition重复方式 重复方式 repeat重复 no-repeat不重复 repeat-x水平重复 repeat-y竖向重复
        var pattern=ctx.createPattern(img, "no-repeat");
        ctx.fillStyle=pattern;
        ctx.fillRect(0,0,400,600);
      }
    </script>
  </body>
</html>

效果
在这里插入图片描述

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，学习成长的路上本就孤单，在之后的路上也希望大家多多支持和陪伴，我会尽我所能产出一些对大家有益的文章，在成长的路上我们一起做大做强😂。！！！
👨‍🔧 个人主页 : 前端初见

前端初见
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
①万字《详解canvas api画图》小白前端入门教程（建议收藏）
2201_75294326的博客
04-08 678
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
前端canvas实现图画工具
qq_46582026的博客
09-04 1488
视频展示 前端canvas实现图画工具 作者有话说 这几天学了canvas标签，在熟悉了canvas的一些属性后我决定做有个关于canvas的一个图画工具。在b站也有看到类似的功能，在看了关于这类程序后我觉得我也可以试试，顺便巩固一下自己这几天学的知识。 大概思路 代码（index.html） <!DOCTYPE html> <html lang="en"> &
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 3242
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
前端 Canvas基础 （一）【基本图形】
前端、python爱好者
07-07 4363
canvas [ˈkænvəs] ：画布 这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下
前端教程：Canvas怎样创建画布和绘制图形？
CZ-001的博客
06-13 1279
HTML5提供了一种全新的画布功能，即通过Canvas来让用户在网页中绘制图形、文字、图片等。Canvas表示画布，现实生活中的画布是用来作画的，HTML5中的Canvas与之类似，我们可以称它为“网页中的画布”。默认情况下，Canvas是一块300px乘50px的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。Canvas并不是通过鼠标绘画的，用户需要通过JavaScript来控制画布中的内容，例如添加图片、线条、文字等。本节将讲解如何使用Canvas绘制添加画布和绘制线条。
《前端基础知识大全》-完整版
12-07
《前端基础知识大全》完整版涵盖了前端开发中的关键概念和技术，包括HTML、CSS、JavaScript、jQuery、移动端开发以及Vue框架的基础知识。以下是对这些知识点的详细解释： 1. HTML：HTML是超文本标记语言，用于创建...
paint-canvas:使用HTML canvas的简单绘画实现
05-01
它提供了一个实用的在线绘画应用实例，对于学习和实践Web前端开发，尤其是canvas绘图技术，是一个很好的起点。开发者可以在此基础上进一步扩展，比如增加撤销/重做功能、添加滤镜效果或实现更复杂的图形交互。
前端项目-apng-canvas.zip
09-02
标题中的“前端项目-apng-canvas.zip”表明这是一个与前端开发相关的项目，主要目标是实现浏览器中的动画PNG（APNG）文件展示。APNG是一种扩展自PNG图像格式，支持帧动画，类似于GIF，但提供了更好的色彩表现和透明...
前端基础积累-新技术-Vue-React-H5-奇怪的BUG-面试-招聘.zip
08-06
HTML5作为现代Web开发的基础，引入了许多新特性，如离线存储（Application Cache）、拖放功能、媒体元素（video和audio）、 canvas绘图以及语义化标签（如、）。面试中，HTML5的知识考察可能会涉及到这些新特性的...
Fun-with-HTML-Canvas:Javascript30-8
04-01
在这个项目中，"main"可能是指主JavaScript文件，里面包含了实现Canvas绘图的代码。 在"Fun-with-HTML-Canvas:Javascript30-8"中，开发者可能会学习到以下知识点： 1. **HTML5 Canvas基本用法**：了解如何在HTML...
开源的HTML5 Canvas画图插件 - Literally Canvas
08-03
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1986529
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
使用canvas实现一个简单的画图工具
lhrdlp的学习笔记
04-08 2380
Canvas是HTML5中非常重要的一个更新亮点，画布，替代Flash的！制作动画、制作游戏。 现在我们使用canvas的基础知识来制作一个简单的画板. 详细的过程与思路在代码注释中均有说明哦>_<. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 9522
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
Canvas学习之画图
weixin_41646815的博客
12-17 316
之前项目有做过前端截图工具，利用的是html2canvas完成截图开发，就想自己完成一些截图工具中的画画。 入门canvas学习，就边学习边记录，用的还是vue框架，有直线，框，圆，箭头，画线，撤销，清空等等。“箭头”是网上copy过来的。。其他就较为简单。还是直接贴代码吧 vue-template <template> <div class="canvasCurve"> <canvas id="canvasCurve" :width
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
weixin_33827731的博客
11-26 269
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线：   &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; ...
绘图技术canvas
weixin_56464670的博客
07-22 377
绘制线段、弧线和矩形
前端学习笔记：基础知识总结与学习经验分享
在前端基础学习过程中，我通过阅读一些大佬的文章，深入了解了前端开发的基础知识和技能。这些文章包括对HTML、CSS、JavaScript等语言的介绍和应用，以及对前端工程化、性能优化、移动端开发等领域的探讨。通过阅读...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端初见

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值