Canvas的基本介绍与使用，图解+案例带你快速上手Canvas

已于 2023-12-16 21:51:44 修改
阅读量4.5k 收藏 32
点赞数 21
分类专栏： # canvas 文章标签： html5 canvas
于 2022-09-16 14:34:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288600/article/details/126889674
版权

目录

前言

大家好，我是南木元元，热衷分享有趣实用的文章。

Canvas简介

canvas 是 HTML5 新增的一个标签，可以使用JavaScript来绘制各种图案。

Canvas 和 SVG 的区别

在这里插入图片描述

  • svg 本质上是一种使用 XML 描述 2D 图形的语言

1.svg 创建的每一个元素都是一个独立的 DOM 元素，可以通过 css 和 JS来操控 dom。
2.修改 svg 中的 DOM 元素，系统会自动进行 DOM 重绘。

  • Canvas 通过 JavaScript 来绘制 2D 图形

1.Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素，因此不能通过 JS 操控 Canvas 内单独的图形。
2.一旦图形被绘制完成，如果数据发生变化就需要重新绘制。

  • 使用场景

如果要展示的数据量比较大，比如一条数据就是一个元素节点，那使用 canvas 会比较合适；
如果用户操作的交互比较多，而且对清晰度有要求（矢量图），那么使用 svg 会比较合适。

Canvas基本使用

创建Canvas

<!DOCTYPE html>
<html lang="en">
<head>
  <title>canvas 基本使用</title>
</head>
<body>
  <canvas width="200" height="200">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
</body>
</html>
  • 效果

在这里插入图片描述

  • 画布大小

canvas 默认画布大小是 300 * 150。

调整画布大小有两种方案：

第一种 : 通过 css 样式 ( 不推荐 )

<html>
<head>
    <style>
        canvas {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
</html>

使用CSS来定义大小，在绘制时图像会伸缩：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
比如本例变成 400px * 400px，那宽度就由 300px 拉伸到 400px，高度由 150px 拉伸到 400px。

第二种 : 通过标签属性 ( 推荐 )

<html>
<head>
    ...
</head>
<body>
    <canvas width="400" height="400"></canvas>
</body>
</html>

所以，使用canvas 元素提供的 width 和 height 两个属性，来设置画布的宽高。

渲染上下文

创建了一个 Canvas 画布，接下来就是获取到 Canvas 的上下文环境，通过getContext() 获得渲染上下文和绘画功能。

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById('canvas');
    // 获取二维渲染上下文
     var ctx = canvas.getContext('2d');
  </script>
</body>

上下文类型：

  • 2d：建立一个二维渲染上下文。
  • webgl： 创建一个 WebGLRenderingContext 三维渲染上下文对象。
  • webgl2：创建一个 WebGL2RenderingContext 三维渲染上下文对象；只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。

画布坐标

Canvas 使用的是 W3C 坐标系 ，也就是遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右，左上角为原点。
在这里插入图片描述

绘制直线

最简单的就是绘制一条直线。
在这里插入图片描述
需要用到这3个方法：

  • moveTo(x, y)：设置初始位置。
  • lineTo(x, y)：下一个点的坐标 (x, y)。
  • stroke()：通过线条来绘制图形轮廓。
<canvas id="canvas" width="400" height="400"></canvas>
<script>
  // 获取 canvas 元素
  var canvas = document.getElementById('canvas');
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  // 绘制直线
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 200);
  ctx.stroke();
</script>

绘制三角形

绘制两个三角形，一个是填充的，另一个是描边的。
在这里插入图片描述

需要用到的方法：

  • beginPath()：新建一条路径。
  • closePath()：闭合路径。
  • stroke()：通过线条来绘制图形轮廓。
  • fill()：通过填充路径的内容区域生成实心的图形。
<canvas id="canvas" width="400" height="400"></canvas>
<script>
  // 获取 canvas 元素
  var canvas = document.getElementById('canvas');
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  // 描边三角形
  ctx.beginPath();// 重新开启一个路径
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
</script>

beginPath()重新开启一个路径，后面的线段不会影响前面的线段。
使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描边三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

绘制矩形

可以使用线段来描绘矩形，但 canvas 也提供了 rect() 等方法可以直接生成矩形。

  • 使用 strokeRect() 描边矩形
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.strokeStyle = 'pink'
  ctx.strokeRect(50, 50, 200, 100)	// strokeRect(x, y, width, height)
</script>

在这里插入图片描述

  • 使用 fillRect() 填充矩形
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = 'pink'
  ctx.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

在这里插入图片描述

  • 使用 rect() 生成矩形

注意：rect() 方法被调用后，还需调用 stroke() 或 fill() 辅助渲染。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'pink'

  ctx.rect(50, 50, 200, 100) // rect(x, y, width, height)

  ctx.stroke()
  ctx.fill()
</script>

在这里插入图片描述

  • 使用 clearRect() 清空矩形
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = 'pink' // 设置填充颜色
  ctx.fillRect(50, 50, 200, 200) // 填充矩形

  ctx.clearRect(60, 60, 180, 90) // 清空矩形
</script>

在这里插入图片描述

绘制文本

语法：

ctx.font = 'font-style font-variant font-weight font-size/line-height font-family'
  • strokeText() 方法绘制描边文本
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = '60px Arial' 
  cxt.strokeStyle = 'pink' // 设置文本描边颜色
  ctx.strokeText('好运', 30, 90)	//strokeText(text, x, y, maxWidth)
</script>

在这里插入图片描述

  • fillText() 绘制填充文本
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = '60px Arial' 
  ctx.font = '60px Arial' 
  ctx.fillStyle = 'pink'
  ctx.fillText('好运', 30, 90)
</script>

在这里插入图片描述

  • textAlign设置文字的水平对齐方式

1.start: 默认。在指定位置的横坐标开始。
2.end: 在指定坐标的横坐标结束。
3.left: 左对齐。
4.right: 右对齐。
5.center: 居中对齐。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 参考线
  ctx.moveTo(200, 0)
  ctx.lineTo(200, 400)
  ctx.strokeStyle = 'red'
  ctx.stroke()

  ctx.font = '30px Arial'

  // 横坐标开始位对齐
  ctx.textAlign = 'start' // 默认值,
  ctx.fillText('好运start', 200, 40)

  // 横坐标结束位对齐
  ctx.textAlign = 'end' // 结束对齐
  ctx.fillText('好运end', 200, 100)

  // 横坐标开始位对齐
  ctx.textAlign = 'left' // 默认值,
  ctx.fillText('好运start', 200, 160)

  // 横坐标结束位对齐
  ctx.textAlign = 'right' // 结束对齐
  ctx.fillText('好运end', 200, 220)

  // 居中对齐
  ctx.textAlign = 'center' // 右对齐
  ctx.fillText('好运center', 200, 280)
</script>

在这里插入图片描述

  • textBaseline设置文字的垂直对齐方式

1.alphabetic: 默认。文本基线是普通的字母基线。
2.top: 文本基线是 em 方框的顶端。
3.bottom: 文本基线是 em 方框的底端。
4.middle: 文本基线是 em 方框的正中。
5.hanging: 文本基线是悬挂基线。

<canvas id="canvas" width="800" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 参考线
  ctx.moveTo(0, 150)
  ctx.lineTo(800, 150)
  ctx.strokeStyle = 'red'
  ctx.stroke()

  ctx.font = '20px Arial'

  // 默认 alphabetic
  ctx.textBaseline = 'alphabetic'
  ctx.fillText('好运alphabetic', 10, 150)

  // 默认 top
  ctx.textBaseline = 'top'
  ctx.fillText('好运top', 200, 150)

  // 默认 bottom
  ctx.textBaseline = 'bottom'
  ctx.fillText('好运bottom', 320, 150)

  // 默认 middle
  ctx.textBaseline = 'middle'
  ctx.fillText('好运middle', 480, 150)

  // 默认 hanging
  ctx.textBaseline = 'hanging'
  ctx.fillText('好运hanging', 640, 150)
</script>

在这里插入图片描述

绘制图片

使用 drawImage() 方法绘制图片，语法：

drawImage(image, dx, dy)
  • image: 要渲染的图片对象。
  • dx: 图片左上角的横坐标位置。
  • dy: 图片左上角的纵坐标位置。
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 1 创建 Image 对象
  const image = new Image()
  // 2 引入图片
  image.src = './images/hz.png'
  // 3 等待图片加载完成
  image.onload = () => {
    // 4 使用 drawImage() 方法渲染图片
    ctx.drawImage(image, 30, 30)	
  }
</script>

在这里插入图片描述

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~

南木元元
关注
  • 21
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
专栏目录
canvas拼图游戏,基于html + canvas画布实现
03-18
canvas拼图游戏,基于html + canvas画布实现
带你使用canvas制作马赛克&canvas飞鸟动画&小球动画
01-08
文章目录canvas制作马赛克&飞鸟动画&小球拖拽动画一、了解单像素操作1、在canvas中的像素操作2、得到场景像素数据3、ImageData对象4、在场景中写入像素数据5、创建一个ImageData对象二、canvas使用图片1、在canvas中插入图片(需要image对象)2、在canvas中设置背景(需要image对象)渐变三、飞鸟动画效果图完整代码四、操作单个像素（行与列）示例一效果图示例二HTML&CSS获取某个点的像素设置某个点的像素完整JavaScript代码效果图五、马赛克HTML&CSS选取马赛克矩形单像素操作完整代码效果图六、小球动画1、角度与弧度的js表达式:2、can
2024年最全html画布canvas标签的使用(附赠three(1)，最新BAT大厂面试者整理的HarmonyOS鸿蒙面试题目
最新发布
2401_84872617的博客
05-14 312
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
three.js+html5 canvas丝带飘动动画特效
06-11
这是一款three.js+html5 canvas绘制的丝带飘动动画特效，透明的丝带缓缓飘动背景动画效果。
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 1895
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
JS --- canvas画布的简单使用
FOR 的博客
08-13 1万+
canvas <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。（我做不到） 1. canvas 标签 使用 canvas 需要在 页面中增加 canvas 标签 <canvas id="canvas" width="300" height="300"> 文字代替： 你的游览器不支持 canvas , 换一个
JS——Canvas 基本用法
qq812457115的博客
06-06 9481
【创建canvas标签】 【初始化画布】 【矩形】 【路径】 【圆形】 【文字】 【图片】 封装的组件：https://download.csdn.net/download/qq812457115/85564165
Canvas详解
热门推荐
发果叁
05-23 3万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
JavaScript全解析——canvas 入门（上）
千锋教育
05-04 3276
也就是说, 在描述线宽的时候, 实际上会从 0.5px 的位置绘制到 1.5px 的位置。○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )所以在设置线段样式的时候, 会默认按照最后一次设置的样式来绘制所有的线段。●所以, 我们在进行 canvas 绘制内容的时候, 涉及到线段的时候。
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8553
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
JavaScript：canvas图像操作
前端御书房
10-19 6370
JavaScript：canvas图像操作，持续更新选中……
使用JavaScript+canvas实现图片裁剪
12-11
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高...
JavaScript实现使用Canvas绘制图形的基本教程
10-21
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
常用业务js组件：canvas绘图、时间戳转换、正则验证、深拷贝等
mosowe
03-03 962
先推荐一个npm包【mosowejs】，对没错，用我的专用名称命名的js，点击可以查看示例，手机，PC均可，内部包含了N多日常开发用到的： 正则验证（手机号，座机号，中英文，数字，url等等）， 常用的一些方法（时间格式化-年月日时分秒季度周数天数，数字千分位，数据脱敏，数据千分位，复制等等等）， 一些数据类型判断（移动端PC判断、object，number，string…） 常用canvas绘图（海报图，裁剪类的有涂抹裁剪，多边形裁剪）基于document开发，同类的跨端插件uniapp点此 支持NP
原生JS+canvas实现炫酷背景
acheng
09-02 1260
title>HTML5 Canvas矩阵粒子波浪背景动画特效原生JS+canvas实现炫酷背景 可以在需要的背景页使用。
html5+js的canvas使用
全易
11-16 162
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
canvas简易使用教程
BUG_CONQUEROR_LI的博客
09-19 6530
canvas绘制矢量图: 是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。提供了一个通过和的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及实时视频处理等方面。
前端系列——Canvas
qq_51553982的博客
12-17 2156
canvas的用途有很多，常用于绘制各类图形，如我们常用的Echarts就是使用canvas构建的。canvas的默认大小为长：300px，宽：150px。使用drawImage函数。
JavaScript之canvas初使用
梦想成为全栈的切图仔
10-19 2837
canvas标签中写入的HTML内容只有在游览器不支持canvas的时候才会显示，一般情况下，为了使网站建设更加完善，我们在canvas标签里，会写入一些视频、图片、当canvas标签不能正常显示的时候，canvas标签中的内容就会被代替canvas显示。ctx.drawImage(imgObj,原图开始裁剪位置x坐标，原图开始裁剪位置y坐标，原图裁剪的宽度，原图裁剪的高度，canvas上开始绘制位置的x坐标，canvas上开始绘制图片y坐标，canvas上图片宽度，canvas上图片高度)；
vue 怎么快速上手canvas
04-25
很高兴回答您的问题！要快速上手使用Vue和Canvas进行开发，可以按照以下步骤进行： 1. 首先，在Vue项目中安装`vue-konva`插件，这是一个基于原生Canvas的Vue插件，可以更加方便地进行画布操作。 2. 接下来，在Vue组件中引入并使用`vue-konva`，例如： ``` <template> <v-stage> <v-layer> <v-rect /> </v-layer> </v-stage> </template> <script> import VueKonva from 'vue-konva'; export default { name: 'MyCanvasComponent', components: { 'v-stage': VueKonva.Stage, 'v-layer': VueKonva.Layer, 'v-rect': VueKonva.Rect, }, }; </script> ``` 在上面的代码中，我们创建了一个包含一个矩形的画布组件。 3. 接下来，您可以使用原生Canvas API对您的画布进行进一步的定制，例如： ``` <template> <v-stage> <v-layer> <v-rect /> </v-layer> </v-stage> </template> <script> import VueKonva from 'vue-konva'; export default { name: 'MyCanvasComponent', components: { 'v-stage': VueKonva.Stage, 'v-layer': VueKonva.Layer, 'v-rect': VueKonva.Rect, }, mounted() { const stage = this.$refs.stage.getStage(); const layer = this.$refs.layer.getLayer(); const rect = this.$refs.rect.getKonvaNode(); // 使用原生Canvas API对画布进行定制 rect.fill('red'); layer.draw(); }, }; </script> ``` 在上面的代码中，我们使用`$refs`访问了我们的组件的各个部分，以及使用原生Canvas API将矩形的填充颜色更改为红色。 希望这些步骤对您有所帮助！如果您有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

南木元元

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

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

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

打赏作者

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

抵扣说明：

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

余额充值