canvas：理解canvas / 基础使用 / 实用demo
一、理解Canvas
Canvas是一个HTML5元素，用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图，但也可以用来实现其他功能，如动画和交互式游戏。
使用Canvas，可以创建各种形状、路径、文本和图像。可以使用JavaScript绘制直线、矩形、圆形、弧形等基本形状。通过使用path API，可以创建复杂的形状和路径。同时，还可以在Canvas上添加图像，通过缩放、旋转、移动等操作进行处理。
Canvas还可以用于创建动画效果。可以使用JavaScript逐帧地修改和更新Canvas元素，从而创建动画效果。可以使用setTimeout()或requestAnimationFrame()函数来控制动画的帧速率和时间。
除了绘图和动画，Canvas还可以用来实现交互式游戏。可以使用Canvas元素检测鼠标、键盘等用户输入，根据用户的输入进行相应操作，从而实现游戏的交互性。
总之，Canvas是一个强大的HTML5工具，可以用于创建各种图形和动画效果，并实现交互式网页应用程序。
二、项目介绍
本文项目 vue3 + ts
三、Canvas的使用方法
Canvas是HTML5新增的一个标签，用于绘制图形，动画等。这里简单介绍一下Canvas的使用方法。
3.1、创建Canvas元素
在HTML中使用
3.2、获取Canvas上下文
在JavaScript中，需要使用Canvas元素的getContext()方法获取Canvas的上下文对象，通过上下文对象可以对Canvas进行绘制，例如：
import { onMounted } from "vue";
// 获取Canvas上下文
onMounted(()=>{
let canvas: any = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
})四、绘制基本图形
4.1、绘制一条直线
4.2、绘制一个矩形
4.3、绘制一个圆形
4.4、绘制图像
通过Canvas的上下文对象，还可以绘制图像，例如：
4.5、绘制动画
通过setInterval()方法可以实现Canvas上的动画效果，例如：
以上是Canvas的基本使用方法，还有很多其他功能可以通过Canvas实现，需要进一步学习和掌握。
五、canvas Demo
5.1、canvas实现流星雨
通过以上代码可以实现一个简单的canvas流星雨。如果需要更加复杂的效果可以调整粒子的属性值或添加其他动画效果。
5.2、canvas实现修改图片色调、饱和度、亮度
Canvas修改图片色调、饱和度、亮度
请选择图片文件：
修改颜色
在这个示例中，使用元素选择图像文件，并在加载图像时绘制在canvas上。使用三个元素来控制色调、饱和度和亮度。在更新颜色值时，使用getImageData()方法获取图像的像素数据。遍历像素数据并将每个像素的RGB颜色值转换为HSL值，并根据选择的色调、饱和度和亮度值进行修改。然后将修改后的像素数据使用putImageData()方法重新绘制到canvas上。 请注意，这个示例的性能可能受到图像大小和计算复杂度的影响。如果需要处理大型图像或者进行更复杂的颜色修改，请考虑使用WebGL或其他高性能图形库。
5.3、canvas实现通过点击事件修改图片中点中区域元素内容颜色为指定颜色
以下是一个使用HTML canvas实现通过点击事件修改图片中点中区域元素内容颜色为指定颜色的示例代码。
Canvas通过点击事件修改图片中点中区域元素内容颜色
请选择图片文件：
修改颜色
在这个示例中，使用<input>元素选择图像文件，并在加载图像时绘制在canvas上。使用<input>元素选择要更改元素的颜色。 使用addEventListener()方法在canvas上添加点击事件监听器。在事件处理程序中，获取鼠标点击位置的x和y坐标，并使用getImageData()方法获取图像的像素数据。计算要更改的像素的索引，并将其颜色更改为所选颜色。使用putImageData()方法重新绘制修改后的图像数据。 请注意，此示例仅在单击canvas上的图像时更改指定像素的颜色。您可以根据需要修改更改颜色的逻辑和条件。
5.4、canvas实现刮刮乐
以下是一个使用HTML canvas实现刮刮乐效果的示例代码。
Canvas实现刮刮乐效果
刮奖面板：
在这个示例中，使用<canvas>元素创建刮刮乐面板并绘制了一个图像。当鼠标在canvas上按下时，设置isDrawing变量为true。当鼠标移动时，如果isDrawing为true，则使用globalCompositeOperation属性将画笔设置为destination-out模式，这样每次涂抹时都会将像素颜色变成透明颜色。在鼠标弹起或离开canvas时，设置isDrawing为false，停止绘制涂层。
此示例中，使用了一个灰色矩形覆盖图像，但是您可以使用任何其他的遮罩层，或者在涂抹时使用自己的颜色。
5.5、canvas玩转图片
用canvas玩转图片【渡一教育】_哔哩哔哩_bilibili
六、html 转 canvas
HTML如何转化为canvas教程_htmltocanvas-CSDN博客
七、过程记录
7.1、Caught error TypeError: Cannot read properties of null (reading 'getContext')
注意获取Canvas上下文的生命周期，在onMounted里边即可
import { onMounted } from "vue";
7.2、html 转 canvas
HTML转Canvas的原理如下
1. 首先，将HTML中的DOM元素（如div、p、img等）转换为Canvas上的元素。
2. 然后，将CSS样式应用到Canvas上的元素。这意味着，需要将HTML中的样式计算出来，并将其应用到Canvas上。
3. 接下来，需要将HTML中的所有内容都绘制到Canvas上。这可以通过在Canvas上使用绘图API（如绘制文本、图像、路径等）来完成。
4. 最后，需要将Canvas上的内容转换为图像或数据，以便将其保存或上传至服务器等操作。
总体来说，HTML转Canvas的过程可以分为三个主要阶段：解析HTML和CSS、将内容绘制到Canvas上、将Canvas内容转换为图像或数据。
demo待完成
7.3、canvas.getContext都有哪些值集
let canvas: any = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
canvas.getContext方法有一个参数，表示上下文类型，常见的有以下类型：
"2d"：获取二维绘图上下文对象。
"webgl" 或 "experimental-webgl"：获取 WebGL 绘图上下文对象。
"webgl2"：获取 WebGL2 绘图上下文对象。
"bitmaprenderer"：获取位图渲染器上下文对象，用于生成位图并使用 ImageBitmap 对象呈现。7.3、webgl 是基于 canvas 吗
WebGL是基于HTML5中的canvas元素的。WebGL使用OpenGL ES 2.0规范来编写3D图形。WebGL的API允许JavaScript在canvas元素上绘制各种类型的3D图像，并使用GPU加速。所以，可以说WebGL是基于canvas，但它使用了更高级的图形处理技术来实现复杂的3D图像。
7.4、canvas可以使用display: none吗
浏览器可以。使用display: none可以让canvas元素隐藏，不显示在页面上。但是需要注意的是，当canvas元素被隐藏后，其上绘制的图形仍然会存在，只是不可见。
小程序可以使用 display: none 吗 ，测试无效果。
可以使用position: fixed; left: 5000px; top: 5000px;
这样就实现了隐藏canvas元素的目的，并且不赞用空间。已测试。
微信小程序Canvas隐藏问题处理_51CTO博客_微信小程序canvas层级问题
小程序canvas 可以用visibility: hidden？ | 微信开放社区
八、欢迎交流指正
九、参考链接
Canvas详解-CSDN博客
Canvas 基础使用_canvas 字体_19岁的墨先生的博客-CSDN博客
HTML 画布 | 菜鸟教程
学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
HTML5 Canvas | 菜鸟教程
Canvas 教程 - Web API 接口参考 | MDN
canvas基础简单易懂教程（完结，多图）_canvas教程-CSDN博客
canvas详细入门教程（1W字 吐血分享）_canvas教程-CSDN博客
解决canvas清晰度的问题【渡一教育】_哔哩哔哩_bilibili
canvas动画【渡一教育】_哔哩哔哩_bilibili
文字也能很酷炫【渡一教育】_哔哩哔哩_bilibili
用canvas玩转图片【渡一教育】_哔哩哔哩_bilibili