• canvas
  • 示例
    • 代码示例
  • 坐标系
    • 代码示例:
  • 常见问题
    • Q：小程序页面头部可否支持渐变色？

canvas

解释：canvas 画布。可使用 JS 操作 canvas 上下文，发出指令，进行绘制。

示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<canvas canvas-id="myCanvas" />
 
 
 

 
 
 

  
  
  
Page({
  
  
  
 onLoad() {
  
  
  
 const CanvasContext = this.createCanvasContext('myCanvas');
  
  
  
 CanvasContext.setFillStyle('#ff0000');
  
  
  
 CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
  
  
  
 CanvasContext.fill();
  
  
  
 CanvasContext.draw();
  
  
  
 }
  
  
  
});
 
 
 

我们来回顾一下，刚刚都执行了哪些指令：

1、创建绘图上下文

推荐使用 Page 对象上挂载的createCanvasContext方法，进行绘制上下文的创建：

• JS

 
 
 

  
  
  
Page({
  
  
  
 onLoad () {
  
  
  
 const CanvasContext = this.createCanvasContext('myCanvas');
  
  
  
 }
  
  
  
});
 
 
 

当然，也可以使用 SWAN 上挂载的createCanvasContext方法。如下，我们调用 SWAN 的接口createCanvasContext创建了一个绘制上下文。

注意：使用 SWAN 上挂载的 createCanvasContext ，会在当前用户可见的 Page 中寻找 canvas ，所以推荐 Page 对象上挂载的 createCanvasContext 方法。

• JS

 
 
 

  
  
  
const CanvasContext = swan.createCanvasContext('myCanvas');
 
 
 

2、发送绘制指令

设置颜色，并画一个圆，填充。

• JS

 
 
 

  
  
  
CanvasContext.setFillStyle('#ff0000');
  
  
  
CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
  
  
  
CanvasContext.fill();
 
 
 

3、绘制
执行上面已经发出的指令，进行 canvas 绘制。

• JS

 
 
 

  
  
  
CanvasContext.draw();
 
 
 

坐标系

canvas 坐标系，以左上角为(0, 0)，横轴为 x，纵轴为 y。
如：CanvasContext.arc(100, 200, 50, 0, 2 * Math.PI);命令，就是在x: 100,y: 200为圆心处，开始画圆。

我们可以在 canvas 中加上一些事件，来观测它的坐标系。

代码示例:

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<canvas canvas-id="myCanvas"
  
  
  
 style="margin: 5px; border:1px solid #d3d3d3;"
  
  
  
 bindtouchstart="start"
  
  
  
 bindtouchmove="move"
  
  
  
 bindtouchend="end" />
  
  
  
<view hidden="{{hidden}}">
  
  
  
 Coordinates: ({{x}}, {{y}})
  
  
  
</view>
 
 
 

 
 
 

  
  
  
Page({
  
  
  
 data: {
  
  
  
 x: 0,
  
  
  
 y: 0,
  
  
  
 hidden: true
  
  
  
 },
  
  
  
 start(e) {
  
  
  
 this.setData({
  
  
  
 hidden: false,
  
  
  
 x: e.touches[0].x,
  
  
  
 y: e.touches[0].y
  
  
  
 })
  
  
  
 },
  
  
  
 move(e) {
  
  
  
 this.setData({
  
  
  
 x: e.touches[0].x,
  
  
  
 y: e.touches[0].y
  
  
  
 })
  
  
  
 },
  
  
  
 end(e) {
  
  
  
 this.setData({
  
  
  
 hidden: true
  
  
  
 })
  
  
  
 }
  
  
  
});
 
 
 

常见问题

Q：小程序页面头部可否支持渐变色？

A：使用 navigationBarBackgroundColor 无法做到渐变色的效果，可以选择使用透明框，新增返回按钮，然后进行设置。或将 navigationStyle 设置成 custom，在全屏页面中制作导航栏，自定义背景色。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<canvas canvas-id="myCanvas" class="myCanvas"/>
  
  
  
</canvas>
  
  
  
<view>内容</view>
 
 
 

 
 
 

  
  
  
Page({
  
  
  
 onLoad() {
  
  
  
 const canvasContext = this.createCanvasContext('myCanvas');
  
  
  
 const grd = canvasContext.createLinearGradient(0, 0, 200, 200);
  
  
  
 grd.addColorStop(0, 'blue');
  
  
  
 grd.addColorStop(1, 'red');
  
  
  
 canvasContext.setFillStyle(grd);
  
  
  
 canvasContext.fillRect(0, 0, 800, 100);
  
  
  
 canvasContext.draw();
  
  
  
 }
  
  
  
});