当前位置：首页 > news >正文

canvas初体验

news 2025/9/16 19:58:52

canvas介绍

Canvas 最初由Apple于2004 年引入，用于Mac OS X WebKit组件，为仪表板小部件和Safari浏览器等应用程序提供支持。后来，它被Gecko内核的浏览器（尤其是Mozilla Firefox），Opera和Chrome实现，并被网页超文本应用技术工作小组提议为下一代的网络技术的标准元素（HTML5新增元素）。
Canvas提供了非常多的JavaScript绘图API（比如：绘制路径、矩形、圆、文本和图像等方法），与元素可以绘制各种2D图形。
Canvas API 主要聚焦于 2D 图形。当然也可以使用元素对象的 WebGL API 来绘制 2D 和 3D 图形。

canvas优缺点

优点：

Canvas提供的功能更原始，适合像素处理，动态渲染和数据量大的绘制，如：图片编辑、热力图、炫光尾迹特效等。
Canvas非常适合图像密集型的游戏开发，适合频繁重绘许多的对象。
Canvas能够以 .png 或 .jpg 格式保存结果图像，适合对图片进行像素级的处理。

缺点：

在移动端可以能会因为Canvas数量多，而导致内存占用超出了手机的承受能力，导致浏览器崩溃。
Canvas 绘图只能通过JavaScript脚本操作（all in js）。
Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化，导致模糊。

canvas初体验

canvas只有两个属性 width height 默认值分别为300px 150px
canvas需要闭合标签，如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
替换内容：当canvas不能正常渲染时，会显示标签中的内容
测试 canvas.getContext() 方法的存在，可以检查浏览器是否支持Canvas
以下是一个简单模板

<body><canvas id="tutorial" width="300" height="300px">你的浏览器不兼容Canvas,请升级您的浏览器!</canvas><script>window.onload = function() {// 1.拿到canvas的元素对象let canvasEl = document.getElementById('tutorial')// 2.判断浏览器是否兼容if(!canvasEl.getContext){return}// 3.拿到Canvas渲染的上下文// ctx: CanvasRenderingContext2D// ctx是一个绘图的上下文: 提供了绘图的指令, 可以绘制各种图形( 圆形 直线 椭圆... )let ctx = canvasEl.getContext('2d') // 2d | webglconsole.log(ctx)}</script>
</body>

canvas网格与坐标

假如，HTML 模板中有个宽 150px, 高 150px 的元素。元素默认被网格所覆盖。
通常来说网格中的一个单元相当于 canvas 元素中的一像素。
该网格的原点位于坐标 (0,0) 的左上角。所有元素都相对于该原点放置。

所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y））
网格或坐标空间是可以变换的，后面会讲如何将原点转换到不同的位置，旋转网格甚至缩放它。注意：移动了原点后，默认所有后续变换都将基于新坐标系的变换。

绘制矩形

fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。

<script>window.onload = function() {let canvasEl = document.getElementById('tutorial')if(!canvasEl.getContext){return}let ctx = canvasEl.getContext('2d') // 2d | webgl// 1.绘制了一个填充的矩形ctx.fillRect(0, 0, 100, 50)// 2.绘制一个边框的矩形ctx.strokeRect(100, 100, 100, 50)// 3.清除指定矩形区域// ctx.clearRect(0,0, 100, 50)}</script>

认识路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。beginPath()
然后你使用画图命令去画出路径。
之后你把路径封闭。closePath()
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。stroke()、fill()

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。（不是必须的）
stroke() 通过线条来绘制图形轮廓。
fill() 通过填充路径的内容区域生成实心的图形。

注意：当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
注意：当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

移动触笔

一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

moveTo(x, y)
将笔触移动到指定的坐标 x 以及 y 上。

线

lineTo(x, y)
绘制一条从当前位置到指定 x 以及 y 位置的直线。

绘制三角形

// 1.描边三角形ctx.beginPath()ctx.moveTo(50, 0)ctx.lineTo(100, 50)ctx.lineTo(50, 100)// ctx.closePath()ctx.stroke()// 2.实心的三角形ctx.beginPath()ctx.moveTo(150, 0)ctx.lineTo(200, 50)ctx.lineTo(150, 100)// ctx.closePath()ctx.fill() // 它会 自动闭合路径

在这里插入图片描述

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。
注意： 弧度=(Math.PI/180)*角度

      ctx.beginPath()ctx.arc(50, 50, 25, 0, Math.PI * 2, false)// 这里ctx.beginPath()也可以 两个圆不在一个路径中ctx.moveTo(175, 150)// 两个圆弧在同一路径中ctx.arc(150, 150, 25, 0, Math.PI)// ctx.closePath()ctx.stroke()

在这里插入图片描述

矩形

直接在画布上绘制矩形的三个额外方法，正如我们开始所见的绘制矩形，同样，也有 rect() 方法，将一个矩形路径增加到当前路径上。

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为 width 以及 height 的矩形。

当该方法执行的时候，moveTo() 方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

// 1.创建一个路径
ctx.beginPath()
// 2.绘图指令
// ctx.moveTo(0, 0)
ctx.rect(100, 100, 100, 50)
// 3.闭合路径
ctx.closePath()
// 4.填充和描边
ctx.stroke()

在这里插入图片描述

canvas介绍

canvas优缺点

优点：

缺点：

canvas初体验

canvas网格与坐标

绘制矩形

认识路径

移动触笔

线

绘制三角形

圆弧

矩形

相关文章：