鸿蒙Canvas中绘制带有边框和阴影的自定义形状？

Question

我在鸿蒙Canvas中需要绘制一些带有边框和阴影的自定义形状。请问有没有一种方法可以同时实现形状的绘制、边框的添加以及阴影效果的设置？最好能够提供一个包含这些功能的代码示例。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在鸿蒙Canvas中绘制带有边框和阴影的自定义形状，你可以使用路径绘制方法定义形状，然后使用stroke方法绘制边框，并使用shadow相关的属性来添加阴影效果。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

// 设置canvas大小
canvas.width = 400;
canvas.height = 400;

// 定义自定义形状（例如一个矩形）
ctx.beginPath();
ctx.rect(50, 50, 300, 200);

// 设置阴影效果
ctx.shadowOffsetX = 10; // 阴影水平偏移
ctx.shadowOffsetY = 10; // 阴影垂直偏移
ctx.shadowBlur = 20;    // 阴影模糊程度
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色

// 设置边框样式
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';

// 绘制边框
ctx.stroke();

// 如果你还想填充形状，可以使用fill方法
// ctx.fillStyle = 'red';
// ctx.fill();

// 将canvas添加到页面中
document.body.appendChild(canvas);

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。