Canvas保姆级入门教程

已于 2024-12-30 15:40:03 修改
阅读量1.1k 收藏 15
点赞数 16
文章标签： 前端 canva可画 数据可视化
于 2024-12-25 10:31:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69250830/article/details/144711652
版权

Canvas

Canvas概念

canvas 是h5提供的一个标签，帮我们创建一块画布。可以绘制任意图形，包括图片、动画等内容。当前主流浏览器均支持。

基本用法

<canvas id="canvas" width="500" height="500"></canvas>

注意：设置canvas画布大小时不能通过style样式调整，会造成画布内容模糊

绘制上下文

Canvas创建了一个画布，并提供了一个上下文对象getContext()获得渲染上下文和绘画功能

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

画布坐标系

Canvas坐标系采用笛卡尔坐标系，默认0，0坐标为右上角。遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右

img

了解了坐标系后让我们开始绘制基本图形吧

绘制图形

通过上下文对象，我们可以绘制多种图形，例如直线、矩形、圆形等

直线

绘制直线的基本api

moveTo(x, y) 画笔移动到指定位置

lineTo(x, y) 从画笔指定位置绘制到x和y坐标

stroke() 绘制

ctx.moveTo(50, 50) // 将画笔移动到50，50
ctx.lineTo(150, 150) // 画直线
ctx.stroke() // 绘制

在这里插入图片描述

矩形

strokeRect(x,y,width,height) 绘制矩形边框

fillRect(x,y,width,height) 绘制填充矩形

clearRect(x, y, width, height) 清除指定矩形区域

// 矩形的边框 strokeRect(x,y,width,height)
ctx.strokeStyle = 'red'   // 设置边框颜色
ctx.strokeRect(50, 50, 200, 100)

// 填充矩形 fillRect(x,y,width,height)
ctx.fillStyle = 'blue'  // 设置填充颜色
ctx.fillRect(100, 100, 200, 100)

// clearRect(x, y, width, height) 清除指定矩形区域
ctx.clearRect(120, 100, 100, 70)

红色区域为矩形边框，蓝色部分为填充矩形，中间白色缺少部分则是清除的矩形区域
在这里插入图片描述

圆弧和圆

arc(x, y, radius, startAngle, endAngle, anticlockwise) x和y为圆心的坐标，radius为半径，startAngle为圆弧或圆的开始位置，endAngle为圆弧或圆的结束位置，anticlockwise是绘制的方向（不写默认为false，从顺时针方向）。

ctx.arc(60, 60, 50, 0, Math.PI, false)
ctx.stroke()

在这里插入图片描述

注意：startAngle和endAngle均为弧度，而不是角度。弧度转角度公式：弧度=(Math.PI/180)*角度 Math.PI*2 则是一个圆

ctx.arc(60, 60, 50, 0, Math.PI, false)
ctx.stroke()
ctx.arc(200, 60, 50, 0, Math.PI * 2, false)
ctx.stroke()

在这里插入图片描述

可以看到两个圆弧之间连接到了一起，这是因为每次绘制的时候没有开启关闭绘制路径

beginPath 开启新的路径绘制

closePath 关闭路径

ctx.beginPath() // 开启路径
ctx.arc(60, 60, 50, 0, Math.PI, false)
ctx.stroke()
ctx.closePath()
ctx.beginPath() // 开启路径
ctx.arc(200, 60, 50, 0, Math.PI * 2, false)
ctx.stroke()
ctx.closePath()

在这里插入图片描述

ctx.closePath()并非必须，只需要每次重新绘制时开启新的路径即可

fill可以为圆弧填充，填充时可以使用strokeStyle和fillStyle来调整边框颜色和填充颜色

ctx.beginPath() // 开启路径
ctx.arc(60, 60, 50, 0, Math.PI, false)
ctx.stroke()

ctx.beginPath() // 开启路径
ctx.arc(200, 60, 50, 0, Math.PI * 2, false)
ctx.stroke()

ctx.beginPath() // 开启路径
ctx.arc(60, 200, 50, 0, Math.PI * 2 / 4, false)
ctx.fill(); // 填充
ctx.stroke()

ctx.beginPath() // 开启路径
ctx.arc(200, 200, 50, 0, Math.PI * 2 / 6, false)
ctx.fill(); // 填充
ctx.stroke()

ctx.beginPath() // 开启路径
ctx.arc(400, 200, 50, 0, Math.PI * 2, false)
ctx.fill(); // 填充
ctx.stroke()

在这里插入图片描述

椭圆

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

  • x、y：椭圆的圆心位置
  • radiusX、radiusY：x轴和y轴的半径
  • rotation：椭圆的旋转角度，以弧度表示
  • startAngle：开始绘制点
  • endAngle：结束绘制点
  • anticlockwise：绘制的方向（默认顺时针），可选参数。
ctx.beginPath();
ctx.ellipse(100, 100, 50, 100, 0, 0, 2 * Math.PI);
ctx.stroke()


ctx.beginPath();
ctx.ellipse(300, 100, 50, 100, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke()

ctx.beginPath();
ctx.ellipse(200, 350, 100, 100, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke()

在这里插入图片描述

当radiusX 和radiusY相等是绘制出来的就是圆形，同样可以使用strokeStyle和fillStyle来调整边框颜色和填充颜色

贝塞尔曲线
二次贝塞尔曲线

二次贝塞尔曲线由三个点组成，分别是起点、终点、控制点

二次贝塞尔曲线在线调试工具

quadraticCurveTo(controlX, controlY, x, y)

  • controlX、controlY：控制点坐标
  • x、y：结束点坐标
  • 起点坐标为画笔坐标，如moveTo()
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(200, 200, 350, 50);
ctx.stroke();// 绘制

在这里插入图片描述

三次贝塞尔曲线

三次贝塞尔曲线相较于二次贝塞尔曲线多了一个控制点

三次贝塞尔曲线在线调试工具

bezierCurveTo(control1X,control1Y, control2X,control2Y, x, y)

  • control1X、control1Y：第一个控制点坐标
  • control2X、control2Y：第二个控制点坐标
  • x、y：结束点坐标
  • 起点坐标为画笔坐标，如moveTo()
ctx.moveTo(50, 200)
ctx.bezierCurveTo(150, 50, 250, 350, 350, 200)
ctx.stroke() // 绘制

在这里插入图片描述

样式
线条样式

lineWidth 设置绘制线条粗细，默认值1

// 绘制样式
// lineWidth 线宽
ctx.moveTo(50, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 100)
ctx.lineTo(200, 100)    
ctx.lineWidth = 10
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 150)
ctx.lineTo(250, 150)
ctx.lineWidth = 20
ctx.stroke()

在这里插入图片描述

lineCap 设置线段端点显示的样子，默认是 butt。可选值为：butt、round 、 square。

// lineCap 线帽
ctx.moveTo(50, 50)
ctx.lineTo(200, 50)
ctx.lineWidth = 10
ctx.lineCap = 'butt'
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 100)
ctx.lineTo(200, 100)    
ctx.lineWidth = 10
ctx.lineCap = 'round'
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 150)
ctx.lineTo(200, 150)
ctx.lineWidth = 10
ctx.lineCap = 'square'
ctx.stroke()

在这里插入图片描述

lineJoin 设置线段之间连接处的样式，默认是 miter。可选值为：round、bevel 、 miter。

// lineJoin 线连接
ctx.moveTo(50, 50)
ctx.lineTo(100, 100)
ctx.lineTo(150, 50)
ctx.lineTo(200, 100)
ctx.lineTo(250, 50)
ctx.lineWidth = 10
ctx.lineJoin = 'miter'
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 150)
ctx.lineTo(100, 200)
ctx.lineTo(150, 150)
ctx.lineTo(200, 200)
ctx.lineTo(250, 150)
ctx.lineWidth = 10
ctx.lineJoin = 'round'
ctx.stroke()

ctx.beginPath();
ctx.moveTo(50, 250)
ctx.lineTo(100, 300)
ctx.lineTo(150, 250)
ctx.lineTo(200, 300)
ctx.lineTo(250, 250)
ctx.lineWidth = 10
ctx.lineJoin = 'bevel '
ctx.stroke()

在这里插入图片描述

透明度

在之前绘制矩形时我们用到过fillRect来填充矩形，颜色支持rgba

ctx.fillStyle = "rgba(255,0,0,0.2)"  // 设置填充颜色
ctx.fillRect(100, 100, 200, 100)


ctx.fillStyle = "rgba(255,0,0,0.7)"  // 设置填充颜色
ctx.fillRect(100, 300, 200, 100)

在这里插入图片描述

渐变
线性渐变

createLinearGradient(x1, y1, x2, y2)，参数分别为 起点的坐标和终点的坐标。

在渐变的设置中还需要一个方法来添加渐变的颜色，语法为：gradient.addColorStop(offset, color)，其中color就是颜色，offset 则是颜色的偏移值，只为0到1之间的数。

let gradient = ctx.createLinearGradient(10, 200, 400, 200)
gradient.addColorStop(0, '#00ff00')
gradient.addColorStop(1, '#ff0000')

ctx.fillStyle = gradient
ctx.fillRect(10, 10, 400, 400)

在这里插入图片描述

addColorStop 可以添加渐变颜色

let gradient = ctx.createLinearGradient(10, 200, 400, 200)

gradient.addColorStop(0, 'rgb(255, 0, 0)')
gradient.addColorStop(0.5, 'rgb(0, 255, 0)')
gradient.addColorStop(1, 'rgb(0, 0, 255)')

ctx.fillStyle = gradient
ctx.fillRect(10, 10, 400, 400)

在这里插入图片描述

createLinearGradient创建渐变时可以设置颜色渐变方向，比如我们想让颜色从左上角到右下角渐变

let gradient = ctx.createLinearGradient(10, 10, 400, 400)

在这里插入图片描述

径向渐变

createRadialGradient(x0, y0, r0, x1, y1, r1)，参数分别为开始圆的坐标和半径以及结束圆的坐标和半径。

let gradient = ctx.createRadialGradient(250, 250, 50, 250, 250, 200)
gradient.addColorStop(0, 'rgb(255, 0, 0)')
gradient.addColorStop(0.5, 'rgb(0, 255, 0)')
gradient.addColorStop(1, 'rgb(0, 0, 255)')
ctx.fillStyle = gradient
ctx.arc(250, 250, 200, 0, Math.PI * 2, false)
ctx.fill() // 填充

在这里插入图片描述

图案填充

createPattern(image, type)，参数分别为：Image 参数可以是一个 Image 对象，也可以是一个 canvas 对象，Type 为图案绘制的类型，可用的类型分别有：repeat、repeat-x、repeat-y 和、no-repeat

let img = new Image()
img.src = 'https://img0.baidu.com/it/u=147381800,3591524360&fm=253&fmt=auto&app=138&f=JPEG?w=371&h=194'
img.onload = function () {
    let pattern = ctx.createPattern(img, 'no-repeat')
    ctx.fillStyle = pattern
    ctx.fillRect(0, 0, 500, 500)
}

在这里插入图片描述

可以看到，我们绘制的矩形大小为500x500，当我们设置no-repeat时不会铺满。让我们改成repeat试试，repeat为x轴和y轴均平铺，可以自己尝试一下repeat-x和repeat-y。

let pattern = ctx.createPattern(img, 'repeat')

在这里插入图片描述

绘制文本
strokeText 文字描边

ctx.strokeText(text, x, y, maxWidth) 参数：text：文本内容、x,y ：坐标、maxWidth：最大宽度

ctx.font = "50px serif"; // 设置字体大小和文字样式
ctx.strokeText("Canvas", 50, 50);

在这里插入图片描述

fillText 填充字体
ctx.fillText("Canvas", 50, 50);

在这里插入图片描述

文本样式

font 修改文本字体大小及文字样式，默认值：10px sans-serif

textAlign 文本对齐方式，参数为：left、right、center、start、end，默认值：start

direction 文本方向，参数为：ltr（文本方向从左向右）、rtl（文本方向从右向左）、inherit（根据情况继承 Canvas元素或者 Document ），默认值是： inherit

ctx.font = "30px serif"; // 设置文案大小和字体
ctx.direction = "ltr"; // 文本方向从左向右
ctx.textAlign = "left"; // 左对齐
ctx.strokeText("Hi Canvas !", 250, 100);
ctx.direction = "ltr"; // 文本方向从左向右
ctx.textAlign = "center"; // 右对齐
ctx.strokeText("Hi Canvas !", 250, 150);
ctx.direction = "ltr"; // 文本方向从左向右
ctx.textAlign = "right"; // 右对齐
ctx.strokeText("Hi Canvas !", 250, 200);
ctx.direction = "rtl"; // 文本方向从左向右
ctx.textAlign = "left"; // 左对齐
ctx.strokeText("Hi Canvas !", 250, 250);
ctx.direction = "rtl"; // 文本方向从左向右
ctx.textAlign = "center"; // 右对齐
ctx.strokeText("Hi Canvas !", 250, 300);
ctx.direction = "rtl"; // 文本方向从左向右
ctx.textAlign = "right"; // 右对齐
ctx.strokeText("Hi Canvas !", 250, 350);

在这里插入图片描述

后续内容待补充…

文章内容借鉴：原文连接

探索前端
关注
2万字Android应用程序性能优化保姆级教程（持续更新）
大模型大数据攻城狮的专栏
08-15 647
在Android应用程序开发过程中，编写高效代码是确保应用程序性能优化的关键一环。这涉及到减少不必要的计算和内存分配，从而提高程序的运行速度和响应能力。为了实现这一目标，开发者需要遵循一系列准则和方法。要尽量减少内存分配。在Android系统中，频繁的内存分配和释放可能会导致垃圾回收的频繁触发，从而影响应用程序的性能。因此，开发者应该尽量避免在循环或频繁调用的方法中创建新的对象。例如，可以使用对象池技术来重用对象，从而减少内存分配的开销。要优化循环和条件语句。
新手小白福音：CocosCreator微信小游戏排行榜保姆级教程，它来了~
袁威的博客
12-31 1336
做游戏，那就避免不了整个排行榜功能，因为对于一个游戏来说，排行榜绝对是必不可少的一个功能，它在一定程度上能给增加玩家的活跃度，从而大大的提高游戏自身的曝光量。
canvas系列教程01——直线、三角形、多边形、矩形、调色板
朝阳39的博客
04-22 1080
绘图步骤 html中添加 canvas 标签，通常需指定 id width（默认 300px） height（默认 150px） <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> 宽度和高度一定要在HTML中定义，不能在CSS中定义（无法通过 canvas对象获取正确的宽度和高度） 获取canvas对象 var cnv = documen.
canvas入门详细教程(W3C)
RD_Xiaobai的博客
06-25 2541
详细介绍画布canvas的属性及方法，和矩形，路径，转化，文本，图像绘制等多个模块的使用。并附上代码示例+代码注解。
Canvas 从入门到上头：手把手带你玩转浏览器绘图
最新发布
Frankabcdefgh的博客
05-05 1956
想用代码画出炫酷动画？Canvas 是你的最佳选择！本文从零开始，带你掌握 Canvas 核心技能：绘制基础图形、添加动态效果、实现用户交互。你将学会如何用几行代码创建流畅动画，优化渲染性能，甚至开发简单小游戏。无论你是前端新手还是想提升图形技能，这篇教程都能让你快速上手。跟着实战示例，一起解锁网页动态绘图的魔力，让你的作品从静态页面跃升为互动体验！
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 9285
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
canvas入门
guxin_duyin的博客
03-12 3927
canvas stroke drawImage arc rect
canvas详解
m0_58368794的博客
10-19 1550
canvas详解
①万字《详解canvas api画图》小白前端入门教程（建议收藏）
2201_75294326的博客
04-08 795
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例
热门推荐
weixin_43831576的博客
11-28 2万+
Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例 一、echarts介绍 ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。可以直接使用E...
【鸿蒙开发】—— 使用画布绘制自定义图形 (Canvas)
2401_88547687的博客
11-06 970
使用 CanvasRenderingContext2D对象 在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
Canvas从入门到精通 - 系统学习Canvas 技术
YunWisdom
10-12 3424
Canvas从入门到进阶的系统学习
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
Canvas从入门到精通 - 系统化学习Canvas绘图技术
YunWisdom
11-08 1597
什么是 CanvasCanvas 的应用场景在浏览器中使用 Canvas 的方法1. 什么是 CanvasCanvas 呢，就像是一块可以在网页上画画的神奇 “画布”。它是 HTML5 中新增的一个元素，可以通过 JavaScript 来在上面绘制各种图形、图像和动画。它可以让网页变得更加生动有趣，不再只是单调的文字和图片。简单来说，Canvas 提供了一种在网页上进行图形绘制的强大工具，让开发者能够自由地创造各种视觉效果。2. Canvas 的应用场景。
Canvas教程001—初识canvas
WwLK123的博客
04-21 227
canvas 元素本身只是一个矩形的容器，没有任何绘图能力，需要借助 JavaScript 获取其绘图上下文（context）来进行实际的绘图操作。常见的绘图上下文有 2D 上下文和 WebGL 上下文，前者用于绘制 2D 图形，后者用于绘制 3D 图形。
canvas方法
Dj_Fairy的博客
11-07 493
参考网站 一、w3School 二、canvas的基本用法 1、var canvas=document.getElementById('canvas')//找到canvas元素 2、var context=canvas.getContext('2d')//创建contetx对象 3、canvas多种内置方法 context.beginPath() context.closePath(...
Canvas 教程（一）
路漫漫其修远兮，吾将上下而求索
10-29 3089
前面演示的方式获取到的仅仅是html元素，现在这种方式 js 能够识别到这是canvas元素。❗ 有博主说：canvas和别的元素不太一样，需要使用属性的方式设置宽和高，不然会有问题。这个情况我暂时还没发现有什么问题，两种方式试了一下都能展示，有问题后面再说。很明显，通过样式修改的宽高尺寸已经严重扭曲。接下来，我们画一个方形看看，直接给代码进行演示。2. 拿到渐变对象，设置渐变的起止颜色，1. 通过画笔对象，创建线性渐变对象。方法把画笔移动到直线的起点。方法把画笔移动到直线的终点。请画出如下所示的折线图？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值