在微信小程序的 Canvas 绘图中,颜色的表示可以直接使用 CSS 颜色字符串,例如 "red"、"#ff0000" 等。以下是一些示例演示如何在 Canvas 中使用颜色:

1. 填充矩形:
   const ctx = wx.createCanvasContext('myCanvas');

   // 使用颜色填充矩形
   ctx.setFillStyle('red');
   ctx.fillRect(10, 10, 150, 100);

   // 绘制
   ctx.draw();

2. 描边矩形:
   const ctx = wx.createCanvasContext('myCanvas');

   // 使用颜色描边矩形
   ctx.setStrokeStyle('#00ff00');
   ctx.strokeRect(10, 10, 150, 100);

   // 绘制
   ctx.draw();

3. 填充文本:
   const ctx = wx.createCanvasContext('myCanvas');

   // 使用颜色填充文本
   ctx.setFillStyle('blue');
   ctx.setFontSize(20);
   ctx.fillText('Hello, World!', 10, 30);

   // 绘制
   ctx.draw();

4. 描边文本:
   const ctx = wx.createCanvasContext('myCanvas');

   // 使用颜色描边文本
   ctx.setStrokeStyle('#ff00ff');
   ctx.setFontSize(20);
   ctx.strokeText('Hello, World!', 10, 30);

   // 绘制
   ctx.draw();

这些示例演示了如何在 Canvas 中使用颜色进行填充和描边,你可以根据实际需求使用不同的颜色值和样式。


转载请注明出处:http://www.zyzy.cn/article/detail/970/微信小程序