风车——ctx.rotate(angle),ctx.translate(dx, dy)

最新推荐文章于 2024-09-15 21:24:07 发布

原创

最新推荐文章于 2024-09-15 21:24:07 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了HTML5 Canvas中ctx.rotate和ctx.translate的使用，通过实例解析了旋转坐标轴的概念以及平移操作的叠加效果。同时提到了渐变的应用，包括线性渐变和径向渐变的创建方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前见过这样的动画，一直想自己做一个，今天做了。

这个动画里有一个点是ctx.rotate，用这个函数可以旋转画布，我一开始误会了，以为只是将当前画面旋转一下，结果做出来的东西很诡异，一会正转一会反转，折腾了好久才发现原来rotate是旋转坐标轴的表示：有A点在（x， y），rotate后A的坐标还是（x， y），但在屏幕上是（x， y）转动了一个角度的（x‘， y’），而且这种变换会累加，下次rotate时的角度是基于本次角度的叠加。

ctx.translate(dx, dy)是一个想当好理解的API了，它把（dx， dy）做为新的（0， 0）点，与rotate一样，重复使用效果叠加。

这次还用到了两个有意思的API：渐变，分为线性的和圆周的，

1. 用var g = ctx.createLinearGradient(x0, y0, x1, y1)创建线性渐变

2. 用var g = ctx.createRadiaGradient(x0, y0, r0, x1, y1, r1)创建圆周的渐变

3.用g.addColorStop(x, color) 0 <= x <= 1，x指起点到终点为单位长度时的一条等高线。

<!DOCTYPE html>
<html>
	<head>
		<title>旋转画

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

type_q

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

踩不完的微信小程序的坑之【ctx.drawImage 绘制的画布，使用ctx.clearRect清除不了】

Dove言和

07-30

7150

canvasContext.clearRect 定义清除画布上在该矩形区域内的内容。 Tip: clearRect 并非画一个白色的矩形在地址区域，而是清空举个栗子： <canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/> 参数参数类型说明 x...

FastHook——实现.dynsym段和.symtab段符号查询

TuringTechnician的博客

03-22

1324

一、概述通过dlopen、dlsym获取共享库函数地址、全局变量是一种经常使用到的编程技巧，尤其是在Hook框架中。然而无论是dlsym还是一些常用框架（如Nougat_dlfunctions），都只能搜索**.dynsym段，而无法搜索.symtab**段。因此实现.symtab段搜索是一个亟待解决的问题。本文将介绍在Nougat_dlfunctions框架基础上，如何实现搜索.symtab...

参与评论您还未登录，请先登录后发表或查看评论

canvas ctx.rotate()

weixin_33755847的博客

05-19

1910

canvas的rotate()方法 rotate()旋转当前的绘图。语法：context.rotate(angle) 参数：angle旋转角度，以弧度计（n*Math.PI）举例：假如想要旋转60度，可以context.rotate(Math.PI/3)进行表示；注意：旋转的中心是在整个画布的左上角（0,0），旋转的正方向是顺时针，旋转的反方向是逆时针，重点：canvas中的rotate方...

canvas——rotate

spfLinux的博客

12-18

360

Document canvas{ background: #ddd; } //canvas元素变形 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); var img=new Image(); img.src='img/canvas.jpg'; img.

Canvas坐标系转换

weixin_33943836的博客

12-25

1053

为什么80%的码农都做不了架构师？>>> ...

canvas 中的rotate原地旋转的简单实现方法

一个前端小白的博客

11-07

2494

canvas 原地旋转的简单实现

学习Canvas基础-位移、缩放、旋转

qq_67983277的博客

11-28

2618

学习Canvas基础-位移、缩放、旋转

TypeError parentComponent.ctx.deactivate is not a function

m0_67393619的博客

03-05

3080

vue3在使用keep-alive出现切换页面报错 vue-router.esm-bundler.js?f6c4:3295 TypeError: parentComponent.ctx.deactivate is not a function at unmount (runtime-core.esm-bundler.js?9e79:4686) at patch (runtime-core.esm-bundler.js?9e79:3664) at Ob

解决vue3 TypeError: parentComponent.ctx.deactivate is not a function 报错

zhouning7879的博客

05-12

2276

解决vue3 TypeError: parentComponent.ctx.deactivate is not a function 报错

前端基础学习之h5-canvas入门5-坐标转换（translate、scale、rotate）

no pains,no gains

01-22

1883

1.直线绘制及绘制折线图 2.矩形绘制及绘制渐变矩形 3.曲线绘制及绘制饼状图 4.图片绘制及绘制帧动画坐标变换平移移动画布的原点 translate(x,y) 参数表示移动目标点的坐标缩放坐标轴缩放 scale(x,y) 参数表示宽高的缩放比例旋转旋转画布原点 rotate(angle) 参数表示旋转角度实例 1.translate 变的是坐标的原点位置，而不是绘制物的位置这里先绘制一个起始位置（100,100），宽300，高300的矩形，再使用trans.

Canvas之translate、scale、rotate、skew方法讲解！

05-07

Canvas之translate、scale、rotate、skew方法讲解！

Canvas 平移(translate())

houyanhua1的专栏

04-15

992

demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {

canvas rotate中心点问题

sanlyshi's front-end road

06-24

1369

ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d'); ctx.fillStyle = "rgb(250,0,0)"; ctx.save(); ctx.translate(50,50);//这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转 //rotate方法的旋转点完全是按照...

HTML5 Canvas 开发绘图方法整理【九、Canvas旋转、缩放】

freedomVenly的博客

02-17

3014

rotate() 旋转当前绘图　　（旋转）语法： ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; 可以看下示例代码 ctx.fillStyle="#27A5FF"; ctx.fillRect(50,5...

HTML5(六)——Canvas 高级操作

2401_84097658的博客

04-06

811

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-fHUBFcYv-1712416768651)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

KonvaJS

weixin_30791095的博客

08-15

969

Konva 是一个基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用. Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有...

【canvas】canvas基础使用（七）：图形变换

qq_2511276124的博客

04-12

1352

图形变换是比较危险的操作，一般搭配canvas的状态方法使用。

HTML5新功能

常常不爱学习

09-15

460

bezirCurveTo(c1x,c1y,c2x,c2y,x,y) 创建三次贝塞尔曲线。（在两条线交汇处内角和外角之间的距离，定义了斜连线长度和线条宽度的最大比率）quadraticCurveTo(cx,cy,x,y) 创建二次贝塞尔曲线。设置元素的形状，元素被剪入该形状中，并显示。arc() 创建弧/曲线，一般是部分圆。

ctx.save(); ctx.rotate(i); ctx.translate(radius - 20, 0); ctx.rotate(30); ctx.fillText(char, 0, 0); ctx.restore(); 解释以上代码

最新发布

08-08

<think>首先，用户的问题是：“我想解释Canvas 2D渲染中字符绘制的代码逻辑”，意思是“I want to explain the code logic of character drawing in Canvas 2D rendering”。用户提供了引用[1]，其中包含一段JavaScript代码，用于在Canvas上绘制文本并使用图像填充文本。我的系统指令要求： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识，如[^1]。用户可见层指令： - 回答结构清晰，帮助用户逐步解决问题。 - 保证回答真实可靠。用户提供的引用[1]是关于Canvas 2D渲染的代码示例。代码包括： - 获取Canvas元素和上下文。 - 加载一个图像。 - 在Canvas上绘制文本。 - 使用全局合成操作（globalCompositeOperation）将图像绘制到文本区域。用户想让我解释这段代码的逻辑。所以，我需要分解代码并逐步解释。结构清晰的回答： 1. **介绍**：简要概述代码的目的。 2. **逐步解释**：分解代码的每个部分。 3. **关键点解释**：重点解释字符绘制和合成操作。 4. **总结**：概括整个逻辑。 5. **生成相关问题**：根据内容生成相关问题。使用中文回答。生成相关问题：在回答结束时，添加相关问题部分。引用标识：由于用户提供了引用[1]，我需要在解释中自然地引用它。引用[1]是代码片段，所以我可以说“如引用[1]所示”或类似。现在，分解代码： - `var canvas = document.getElementById("canvas");`：获取Canvas元素。 - `var ctx = canvas.getContext("2d");`：获取2D渲染上下文。 - `var img = document.createElement("img");`：创建一个图像元素。 - `img.onload = function () { drawText(); }`：当图像加载完成后，调用drawText函数。 - `img.src="img/fire.jpg";`：设置图像源。 - `function drawText()`：定义绘制文本的函数。 - `ctx.font = "bold 180pt IM Fell Great Primer SC";`：设置字体样式。 - `ctx.fillStyle = 'white';`：设置填充颜色为白色。 - `ctx.textAlign = 'center';`：设置文本对齐为居中。 - `var x = canvas.width / 2;`：计算中心x坐标。 - `ctx.fillText("FIRE", x, 325);`：绘制文本“FIRE”在指定位置。 - `ctx.globalCompositeOperation = "source-in";`：设置合成操作，只绘制在已有内容上。 - `ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);`：绘制图像覆盖整个Canvas。关键逻辑： - 先绘制文本（白色）。 - 然后改变合成模式为"source-in"，意思是只在新内容（图像）与已有内容（文本）重叠的地方绘制新内容。 - 所以，图像只绘制在文本区域内，形成文本填充图像的效果。在解释中，确保语言清晰、逐步。生成相关问题： - 基于Canvas渲染、合成操作等。 - 例如： 1. 什么是Canvas的全局合成操作？ 2. 如何优化Canvas文本渲染性能？ 3. Canvas支持哪些文本属性设置？最后，添加引用标识：在提到代码时，说“如引用[1]所示”。完整回答结构： 1. 介绍：解释代码的整体目的。 2. 代码解释：分步解释每个部分。 3. 合成操作解释：详细说明globalCompositeOperation。 4. 总结。 5. 相关问题。</think>### Canvas 2D渲染中字符绘制的代码逻辑解释用户提供的代码（引用[1]）展示了如何在Canvas 2D上绘制文本，并利用图像填充文本区域，实现一种视觉特效。下面我将逐步解释代码逻辑，确保结构清晰。整个逻辑分为四个阶段：初始化Canvas、加载图像、绘制文本、应用合成操作。代码基于JavaScript的Canvas API实现，核心是利用`globalCompositeOperation`控制渲染顺序和重叠行为。 #### 1. **初始化Canvas和上下文** 代码首先获取Canvas元素和2D渲染上下文，这是所有绘图操作的基础： ```javascript var canvas = document.getElementById("canvas"); // 获取Canvas元素 var ctx = canvas.getContext("2d"); // 获取2D渲染上下文 ``` - `canvas` 是HTML中的`<canvas>`元素，代表绘图区域。 - `ctx` 是2D渲染上下文对象，提供绘图方法（如绘制文本、图像）。这里假设Canvas已通过HTML定义（如`<canvas id="canvas"></canvas>`）。 #### 2. **加载图像并设置回调** 代码创建一个图像元素，并定义加载完成后的回调函数： ```javascript var img = document.createElement("img"); // 创建图像元素 img.onload = function () { // 图像加载完成时触发 drawText(); // 调用文本绘制函数 }; img.src = "img/fire.jpg"; // 设置图像源路径 ``` - `img` 是一个动态创建的图像对象，`src` 属性指定图像文件路径（如"img/fire.jpg"）。 - `onload` 事件确保图像完全加载后才执行`drawText()`，避免绘图错误（如未加载图像时绘制空白区域）。这是异步处理的常见模式[^1]。 #### 3. **绘制文本（字符绘制核心逻辑）** `drawText()` 函数负责在Canvas上绘制文本： ```javascript function drawText() { ctx.font = "bold 180pt IM Fell Great Primer SC"; // 设置字体样式：粗体、180点、特定字体 ctx.fillStyle = 'white'; // 设置填充颜色为白色 ctx.textAlign = 'center'; // 文本水平居中 var x = canvas.width / 2; // 计算Canvas中心点x坐标 ctx.fillText("FIRE", x, 325); // 在(x,325)位置绘制文本"FIRE" // ...（后续合成操作） } ``` - **字符绘制关键点**： - `ctx.font` 定义文本样式，包括字体大小（180pt）、字重（bold）和字体族（IM Fell Great Primer SC）。如果字体不可用，浏览器会回退到默认字体。 - `ctx.fillStyle = 'white'` 设置文本颜色为白色，这是初始填充色。 - `ctx.textAlign = 'center'` 确保文本在水平方向居中。 - `ctx.fillText("FIRE", x, 325)` 绘制文本： - 参数`"FIRE"` 是要渲染的字符串。 - `x = canvas.width / 2` 是文本基线的水平中心位置。 - `325` 是文本基线的垂直位置（以像素为单位），这里固定为325，可能基于Canvas高度调整。 - 此时，文本以白色实心形式绘制到Canvas上，但尚未应用图像填充。 #### 4. **应用全局合成操作实现图像填充** 在文本绘制后，代码改变合成模式，用图像填充文本区域： ```javascript ctx.globalCompositeOperation = "source-in"; // 设置合成模式：只保留重叠区域 ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); // 绘制图像 ``` - **合成操作逻辑**： - `ctx.globalCompositeOperation = "source-in"` 是核心： - "source-in" 是Canvas的合成模式之一，表示新绘制的内容（图像）只出现在与已有内容（文本）重叠的区域。其他区域变为透明。 - 数学上，这类似于交集操作：如果$A$是文本区域，$B$是图像区域，则结果$R = A \cap B$。 - `ctx.drawImage()` 绘制图像： - 参数说明：`drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)` - 这里，图像从源(0,0)开始，尺寸为`img.width`和`img.height`，绘制到Canvas的(0,0)位置，缩放至Canvas全尺寸（`canvas.width`和`canvas.height`）。 - **整体效果**：先绘制白色文本，再通过"source-in"模式，使图像仅填充文本内部区域，实现"文字被图像填充"的视觉效果（如火焰文字）。 #### 总结整个代码逻辑是顺序执行的：初始化Canvas → 加载图像 → 绘制文本 → 应用合成操作填充图像。关键创新在于使用`globalCompositeOperation`控制渲染层次，这比手动遮罩更高效。性能上，图像加载和文本绘制是主要开销，但Canvas API硬件加速优化良好[^1]。实际应用中，可调整字体、位置或合成模式（如"lighter"用于混合效果）来定制样式。