小程序API能力集成指南——画布API汇总（四）

最新推荐文章于 2025-04-25 20:53:07 发布

原创

最新推荐文章于 2025-04-25 20:53:07 发布 · 1.5k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #算法 #iot #小程序 #API #服务器

本文详细介绍了JavaScript中CanvasContext对象的多个关键方法，包括scale缩放、rotate旋转、translate平移、绘制文本、变换矩阵、填充和描边样式设置以及阴影和透明度控制，帮助开发者更好地理解和使用canvas绘图功能。

CanvasContext

canvas 组件的绘图上下文。

方法如下（3）：

scale

CanvasContext.scale

CanvasContext.scale(number scaleWidth, number scaleHeight)

功能描述

在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

参数

number scaleWidth

横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

number scaleHeight

纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.strokeRect(10, 10, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 25, 15);
 
ctx.draw();

rotate

CanvasContext.rotate

CanvasContext.rotate(number rotate)

功能描述

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。

参数

number rotate

旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.strokeRect(100, 10, 150, 100);
ctx.rotate((20 * Math.PI) / 180);
ctx.strokeRect(100, 10, 150, 100);
ctx.rotate((20 * Math.PI) / 180);
ctx.strokeRect(100, 10, 150, 100);
 
ctx.draw();