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

IoT砖家涂拉拉

于 2024-03-07 00:00:00 发布

阅读量1.5k

点赞数 45

CC 4.0 BY-SA版权

文章标签： java 前端算法 iot 小程序 API 服务器

本文链接：https://blog.youkuaiyun.com/Ms_Smart/article/details/136399751

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

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

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();