文章目录

前言
- canvas文档
一、canvas代码提示（插件和注释）
- 1.1、使用插件方式(推荐这种方式) =>canvas-snippets
- 1.2、使用注释方式
二、初始canvas
- 2.1、什么是canvas
- 2.2、 canvas 标签
三、canvas上下文对象与游览器支持
- 3.1、 canvas上下文对象getContext
- 3.2、画笔对象getContext
- 3.3、canvas游览器支持
四、canvas绘制基本图形
- 4.1、canvas矩形绘制
- - 4.1.1、canvas矩形绘制(填充模式)
  - 4.1.2、canvas矩形绘制(路径模式)
  - 4.1.3、canvas矩形绘制(清除模式)
- 4.2、canvas绘制圆弧与笑脸
- - 4.2.1、绘制圆形
  - 4.2.2、绘制半圆
  - 4.2.3、绘制笑脸(方法一)
  - 4.2.3、绘制笑脸(方法二)
- 4.3、canvas绘制折线线段
- - 4.3.1、绘制线段
  - 4.3.1、绘制三角形(路经版和填充版)
- 4.4、arcTo方法绘制圆弧方式
- 4.5、二次贝塞尔曲线实现聊天气泡框
- 4.6、三次贝塞尔曲线实现献给女朋友的爱心
- 4.8、封装路径path2d
五、canvas样式
- 5.1、样式和颜色控制
- 5.2、线性渐变和径向渐变
- - 线性渐变
  - 封装渲染函数结合请求动画帧实现动画渐变
  - 径向渐变
  - 使用径向渐变绘制球体效果
- 5.3、圆锥渐变
- 5.4、 pattern印章填充方式
总结

前言

身为一个前端开发人员,肯定都是想开发出炫酷的应用程序，可以有很多动画特效，例如黑客帝国的数字，彩色炫酷的粒子动效，也可以实现各种面板，让页面特别秀！接下来这篇文章就是让大家了解和使用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')// 判断是否有getContextif(!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')// 判断是否有getContextif(!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')// 判断是否有getContextif(!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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");// 封装渲染函数readerlet 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.圆锥渐变创建图案样式patternvar 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>

效果

总结

如果这篇【文章】有帮助到你

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

前端基础知识(持续更新中)
HTML Hyper Text Markup Language 超文本标记语言 1.html5为什么只需要写<! DOCTYPE HTML> 答:这是w3c制定的规则,是文档类型声明,语义 ...

jQuery学习总结之基础知识----持续更新中
语法总结和注意事项 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象 ...

前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...

前端基础知识（更新中）
HTML和CSS基础知识本文章为B站尚硅谷前端学习视频的笔记整理一.基本语法 (一)元素标题:一到六级标题:h1到h6 <h1></h1> 段落:<p>< ...

幻想-FLEX 3基础视频教程持续更新中
欢迎点击此处订阅本Blog title="RSS 2.0" type="application/rss+xml" href="http://feed. ...

linux基础知识(持续更新)
文章目录前言 Linux查看cpu相关信息,包括型号.主频.内核信息等 touch mkdir echo cat/tail grep egrep| ls sed tee cp scp 查看端口号占用 ...

Node.js零基础自学(持续更新中）
1. Node.js时基于Chrome V8 引擎的JavaScript运行环境.官网:Node.jsNode.js® is a JavaScript runtime built on Chrome' ...

JAVA基础（持续更新中）
JAVA基础 2020年11月27日 21:01 1 预科 a. 什么是计算机能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备. 由硬件常见的形式有台式计算机.笔记本计算机.大型计算机等 ...

前端面试笔试编程题（持续更新中）
1. 求两个日期中间的有效日期(考虑闰年)(微众银行校招笔试) 如 2015-2-8 到 2015-3-3,返回[2015-2-8 2015-2-9-] 思路:使用毫秒数一天一天地放进去 // 求 ...

最新文章

在SQL Server 2008中配置文件流（FILESTREAM）

CKFinder 自定义文件路径扩展ConfigurationPathBuilder

android HTTP发送及MD5加密收集

17、Spring Boot普通类调用bean【从零开始学Spring Boot】

PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩，设置页面控件居中显示实例演示

Golden Gate 与 Oracle DataGuard的区别

python集合set,frozenset--笔记

C# 中使用log4net 日志记录

（45）System Verilog 类中变量随机激励约束语法

android ListView 自动滚动到最底部

Python 爬虫的集中简单方式

M语言中的操作符说明：大括号{}-列List，方括号[]-记录Record

Pajek常用方法保姆级操作指南——社会网络分析

移动支付的方式有哪些拾方易告诉你

批量爬取某图片网站的图片

小米11即将发布，这是小米进军高端市场最好的机会？

网站怎么赚钱? 靠流量赚钱吗? 广告吗? 建什么网站赚钱

python公历转农历_python有没有能实现公历转换农历的库

【数学建模】九：MATLAB机理建模方法

java 最大递减数_华为机试题：最大递减数

热门文章

使用Python对物流行业数据进行数据分析

留存分析方法+案例+参考代码

3～4万能买什么样的经济型车?

Python函数基础教程-张明阳-专题视频课程

sqlite3 取整函数

华为正式发布鸿蒙多少钱,正式发布！鸿蒙，来了！

matlab实现最小堆

servlet修改用户头像_JavaWeb之上传头像

华为路由器——DHCP接口地址池配置

关于mysql删除用户 bug的问题

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

文章目录

前言

canvas文档

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

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

1.2、使用注释方式

二、初始canvas

2.1、什么是canvas

2.2、 canvas 标签

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

3.1、 canvas上下文对象getContext

3.2、画笔对象getContext

3.3、canvas游览器支持

四、canvas绘制基本图形

4.1、canvas矩形绘制

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

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

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

4.2、canvas绘制圆弧与笑脸

4.2.1、绘制圆形

4.2.2、绘制半圆

4.2.3、绘制笑脸(方法一)

4.2.3、绘制笑脸(方法二)

4.3、canvas绘制折线线段

4.3.1、绘制线段

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

4.4、arcTo方法绘制圆弧方式

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

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

4.8、封装路径path2d

五、canvas样式

5.1、样式和颜色控制

5.2、线性渐变和径向渐变

线性渐变

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

径向渐变

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

5.3、 圆锥渐变

5.4、 pattern印章填充方式

总结

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

最新文章

热门文章

5.3、圆锥渐变