Canvas保姆级教程----深入解析HTML5 Canvas工作原理和常用方法

news2024/11/27 8:36:43

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

目录

✨ 前言

一、Canvas工作原理

1、获取Canvas元素

2、获取渲染上下文

3、绘图方法

4、渲染动画

二、坐标系统

三、常用绘图方法

1、绘制矩形

2、绘制路径

3、绘制圆弧 arc()

4、绘制图像 drawImage()

5、变形

6、样式设置

7、渐变和图片填充

 四、Canvas案例:

1、复杂路径绘制

2、保存和恢复状态

3、剪切区域 clip()

4、图像像素操作

5、动画效果

✨ 结语


 

✨ 前言

        HTML5 Canvas让网页具备了强大的绘图能力,我们可以通过JavaScript动态生成各种图表、动画等复杂的可视化效果。要合理利用Canvas开发丰富的组件和页面,理解它的工作原理是必要的。本文将详细解析Canvas的实现过程,并给出各种常用绘图方法的代码示例,希望可以帮助开发者全面掌握Canvas。

一、Canvas工作原理

1、获取Canvas元素

使用document.getElementById()获取HTML页面中的<canvas>元素,例如:

const canvas = document.getElementById('myCanvas')
2、获取渲染上下文

通过canvas.getContext()获取绘图上下文,通常我们使用2d上下文:

const ctx = canvas.getContext('2d')
3、绘图方法

通过上下文提供的API绘制图形,诸如rect、arc等。

ctx.rect(20, 20, 150, 100)
4、渲染动画

Canvas会记录绘图命令,并在需要时重绘整个scen来实现动画效果。

二、坐标系统

Canvas使用一个笛卡尔坐标系统,原点在左上角,x轴向右为正,y轴向下为正,单位默认为px。

三、常用绘图方法

1、绘制矩形
  • fillRect(x, y, width, height) 填充矩形
  • strokeRect(x, y, width, height) 绘制矩形边框
    // 绘制一个蓝色矩形
    ctx.fillStyle = 'blue' 
    ctx.fillRect(20, 20, 150, 100)
    
    // 绘制一个矩形边框 
    ctx.strokeStyle = 'red'
    ctx.strokeRect(20, 20, 150, 100)

2、绘制路径
  • 使用beginPath()起始一条路径,各种绘图命令添加子路径,closePath()闭合路径。

    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.lineTo(200, 20)
    ctx.lineTo(200, 100)
    ctx.closePath()
    ctx.stroke()

3、绘制圆弧 arc()

arc(x, y, radius, startAngle, endAngle, anticlockwise)

ctx.beginPath()
ctx.arc(100, 75, 50, 0, 2 * Math.PI) 
ctx.fillStyle = 'red'
ctx.fill()
4、绘制图像 drawImage()
// 绘制图像
const img = new Image() 
img.src = 'image.png'
img.onload = function() {
  ctx.drawImage(img, 0, 0) 
}

// 缩放绘制
ctx.drawImage(img, 0, 0, width, height) 

// 剪切绘制
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
5、变形
  • translate(x, y) 坐标系平移
  • rotate(angle) 旋转坐标系
  • scale(x, y) 坐标系缩放
  • transform(a, b, c, d, e, f) 变形矩阵
// 平移坐标系原点到(50, 50)
ctx.translate(50, 50)

// 以(50, 50)为中心旋转30度
ctx.rotate(30 * Math.PI/180) 

// 缩放坐标系
ctx.scale(0.5, 0.5)
6、样式设置
  • fillStyle 填充样式
  • strokeStyle 线条样式
  • lineWidth 线宽
  • lineCap 线端样式
ctx.fillStyle = 'rgba(255, 0, 0, 0.3)' 

ctx.lineWidth = 5
ctx.strokeStyle = '#333'
7、渐变和图片填充
  • createLinearGradient() 线性渐变
  • createRadialGradient() 径向渐变
  • createPattern() 填充画布图案
// 创建一个线性渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red') 
grd.addColorStop(1, 'white')

// 填充渐变
ctx.fillStyle = grd 
ctx.fillRect(10, 10, 150, 80)

 四、Canvas案例:

1、复杂路径绘制

我们可以通过多次调用lineTo()和曲线绘制方法来创建复杂路径:

ctx.beginPath()

ctx.moveTo(50, 50)
ctx.lineTo(100, 75) 
ctx.quadraticCurveTo(100, 25, 150, 50)
ctx.lineTo(150, 150)

ctx.closePath()
ctx.fill()
2、保存和恢复状态

save() 和 restore() 可以保存和恢复Canvas的状态: 

// 保存当前状态
ctx.save()  

// 移动坐标系原点
ctx.translate(100, 100)

// 绘制路径
ctx.beginPath()
//...

// 恢复到保存的状态
ctx.restore()
3、剪切区域 clip()

我们可以剪切出某个形状的区域:

// 剪切矩形区域
ctx.rect(50, 50, 100, 100)
ctx.clip()

// 后续的绘制都会被剪切
ctx.beginPath()  
// ...
4、图像像素操作

getImageData() 和 putImageData() 可以直接读写像素信息。

5、动画效果

通过循环调用绘制方法,并清除上一帧可以创建动画。

function draw(){

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  //绘制当前帧动画
  
  requestAnimationFrame(draw)
}

✨ 结语

        通过详细解析Canvas的原理及各种绘图方法的代码示例,相信大家对Canvas的运作和使用会有更深入的理解。Canvas为前端开发提供了强大的能力,希望本文可以帮助大家高效开发丰富的网页组件和图形效果。

        我们改日再会

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1354246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

01、Kafka ------ 下载、安装 ZooKeeper 和 Kafka

目录 Kafka是什么&#xff1f;安装 ZooKeeper下载安装启动 zookeeper 服务器端启动 zookeeper 的命令行客户端工具 安装 Kafka下载安装启动 Kafka 服务器 Kafka是什么&#xff1f; RabbitMQ的性能比ActiveMQ的性能有显著提升。 Kafka的性能比RabbitMQ的性能又有显著提升。 K…

ngrok-内网穿透

一、访问官网下载相关的内容 Download (ngrok.com) linux或者windows可供选择&#xff0c;主要在于你的项目跑在什么地方 选择下载 二、获取Authtoken 点击右上角登录&#xff0c;没有号用谷歌账号登录即可跳转 三、在Windows进行内网穿透 下载打开 打开 运行在命令行中&am…

【42页动态规划学习笔记分享】动态规划核心原理详解及27道LeetCode相关经典题目汇总

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐--…

【Spring】19 AOP介绍及实例详解

文章目录 1. 定义1&#xff09;什么意思呢&#xff1f;2&#xff09;如何解决呢&#xff1f; 2. 基本概念1&#xff09;切面&#xff08;Aspect&#xff09;2&#xff09;切点&#xff08;Pointcut&#xff09;3&#xff09;通知&#xff08;Advice&#xff09;4&#xff09;连…

【python入门】day17:模块化编程、math库常见函数

什么叫模块 模块的导入 导入所有&#xff1a;import 模块名称 导入指定&#xff1a;from 模块名称 import 函数/变量/类 python的math库 什么是math库 Python的math库是Python的内建库之一&#xff0c;它提供了许多数学函数&#xff0c;包括三角函数、对数函数、幂函数等&a…

迅为RK3588开发板使用 FFMpeg 进行推流

Debian/Ubuntu 系统使用以下命令安装 FFMpeg &#xff0c;如下图所示&#xff1a; apt-get install ffmpeg 使用 ifconfig 查看开发板 ip 为 192.168.1.245 如下图所示&#xff1a; 使用 FFMpeg 推流一个 mp4 视频进行测试&#xff0c;作者将测试视频 test.mp4 放在了根目录下…

linuxnodejs 20.* 安装问题,version `GLIBCXX_3.4.26‘

背景 今天服务器被重置拉&#xff0c;nodejs 环境不存在&#xff0c;特意安装下nodejs&#xff0c;一访问官网&#xff0c;妈呀&#xff0c;居然到20版本拉&#xff01;就尝试安装下最新版本&#xff01; 过程 $ cd /opt $ curl -OL https://nodejs.org/dist/v20.10.0/node-v2…

c++语言基础18-开房门

题目描述 假设你手里有一串钥匙&#xff0c;这串钥匙上每把钥匙都有一个编号&#xff0c;对应着一个房门的编号。现给你一个房门编号&#xff0c;你需要判断是否能够打开该房门。 输入描述 测试数据共有多组。 第一行为一个整数 s&#xff0c;表示共有多少组测试数据。 每组第一…

Spring高手之路-Spring中Bean的五大作用域

目录 Singleton&#xff08;单例&#xff09;&#xff1a;默认的作用域 Prototype&#xff08;原型&#xff09; Request&#xff08;请求&#xff09; Session&#xff08;会话&#xff09; Global Session&#xff08;全局会话&#xff09; 五大作用域范围对比 作用域…

[C#]基于deskew算法实现图像文本倾斜校正

【算法介绍】 让我们开始讨论Deskeweing算法的一般概念。我们的主要目标是将旋转的图像分成文本块&#xff0c;并确定它们的角度。为了让您详细了解我将使用的方法&#xff1a; 照常-将图像转换为灰度。应用轻微的模糊以减少图像中的噪点。现在&#xff0c;我们的目标是找到带…

【GoLang入门教程】Go语言几种标准库介绍(四)

编程语言的未来&#xff1f; 文章目录 编程语言的未来&#xff1f;前言几种库fmt库 (格式化操作)关键函数&#xff1a;示例 Go库标准库第三方库示例 html库(HTML 转义及模板系统)主要功能&#xff1a;示例 总结专栏集锦写在最后 前言 上一篇&#xff0c;我们介绍了debug、enco…

C/C++动态内存分配 malloc、new、vector(简单讲述)

路虽远&#xff0c;行则将至 事虽难&#xff0c;做则必成 今天来主要讲C中动态内存分配 其中会穿插一些C的内容以及两者的比较 如果对C语言中的动态内存分配还不够理解的同学 可以看看我之前的博客:C语言动态分配 在讲解C的动态内存分配之前 我们先讲一下C内存模型 &#xff1…

国家信息安全水平等级考试NISP二级题目卷③(包含答案)

国家信息安全水平等级考试NISP二级题目卷&#xff08;三&#xff09; 国家信息安全水平等级考试NISP二级题目卷&#xff08;三&#xff09;需要报考咨询可以私信博主&#xff01; 前言&#xff1a; 国家信息安全水平考试(NISP)二级&#xff0c;被称为校园版”CISP”,由中国信息…

全解析阿里云Alibaba Cloud Linux镜像操作系统

Alibaba Cloud Linux是基于龙蜥社区OpenAnolis龙蜥操作系统Anolis OS的阿里云发行版&#xff0c;针对阿里云服务器ECS做了大量深度优化&#xff0c;Alibaba Cloud Linux由阿里云官方免费提供长期支持和维护LTS&#xff0c;Alibaba Cloud Linux完全兼容CentOS/RHEL生态和操作方式…

78 Python开发-多线程FuzzWaf异或免杀爆破

这里写目录标题 本课知识点:学习目的:演示案例:Python开发-简单多线程技术实现脚本Python开发-利用FTP模块实现协议爆破脚本Python开发-配合Fuzz实现免杀异或Shell脚本 涉及资源: 本课知识点: 协议模块使用&#xff0c;Request爬虫技术&#xff0c;简易多线程技术&#xff0c;…

Postman 安装及使用

文章目录 1. 安装 Postman1&#xff09;下载2&#xff09;安装3&#xff09;注册用户4&#xff09;登陆完成 2. 创建和发送请求1&#xff09;发送一个 GET 请求2&#xff09;发送一个 POST 请求 3. 查看响应4. 使用环境变量和变量5. 高级功能和测试6. 导出和分享请求总结 Postm…

IDS 和 IPS:了解异同

IDS 和 IPS 是至关重要的网络安全技术&#xff0c;经常被混淆或互换使用。那么&#xff0c;IDS 和 IPS 之间有什么区别&#xff0c;哪一种是最适合您组织需求的选择呢&#xff1f; 什么是IDS&#xff08;入侵检测系统&#xff09;&#xff1f; 入侵检测系统 (IDS) 是一种网络…

git在本地创建dev分支并和远程的dev分支关联起来

文章目录 git在本地创建dev分支并和远程的dev分支关联起来1. 使用git命令2. 使用idea2.1 先删除上面建的本地分支dev2.2 通过idea建dev分支并和远程dev分支关联 3. 查看本地分支和远程分支的关系 git在本地创建dev分支并和远程的dev分支关联起来 1. 使用git命令 git checkout…

华芯微特|MCU之TIMER输入捕获

引言 华芯微特公司SWM系列单片机提供的TIMER个数和功能有些微差别&#xff0c;为了让您更加简单的使用这一功能&#xff0c;下面小编将以SWM190为例&#xff0c;我们今天详细讲解一下TIMER的输入捕获功能。 TIMER输入捕获 一、TIMER定时器之输入捕获功能 我们今天详细讲解一下…

一篇文章学会Linux

一篇文章学会Linux 声明&#xff1a;以下内容均为我个人的理解&#xff0c;如果发现错误或者疑问可以联系我共同探讨 简介 Linux Linux是一种自由和开放源码的类UNIX操作系统。该操作系统的内核由林纳斯托瓦兹在1991年10月5日首次发布&#xff0c;在加上用户空间的应用程序…