• canvas
  • 示例
    • 代碼示例
  • 坐標(biāo)系
    • 代碼示例:
  • 常見問題
    • Q：小程序頁面頭部可否支持漸變色？

canvas

解釋：canvas 畫布。可使用 JS 操作 canvas 上下文，發(fā)出指令，進(jìn)行繪制。

創(chuàng)新互聯(lián)主營行唐網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,行唐h5小程序開發(fā)搭建,行唐網(wǎng)站營銷推廣歡迎行唐等地區(qū)企業(yè)咨詢

示例

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

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

我們來回顧一下，剛剛都執(zhí)行了哪些指令：

1、創(chuàng)建繪圖上下文

推薦使用 Page 對(duì)象上掛載的createCanvasContext方法，進(jìn)行繪制上下文的創(chuàng)建：

• JS

 
 
 

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

當(dāng)然，也可以使用 SWAN 上掛載的createCanvasContext方法。如下，我們調(diào)用 SWAN 的接口createCanvasContext創(chuàng)建了一個(gè)繪制上下文。

注意：使用 SWAN 上掛載的 createCanvasContext ，會(huì)在當(dāng)前用戶可見的 Page 中尋找 canvas ，所以推薦 Page 對(duì)象上掛載的 createCanvasContext 方法。

• JS

 
 
 

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

2、發(fā)送繪制指令

設(shè)置顏色，并畫一個(gè)圓，填充。

• JS

 
 
 

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

3、繪制
執(zhí)行上面已經(jīng)發(fā)出的指令，進(jìn)行 canvas 繪制。

• JS

 
 
 

  
  
  
CanvasContext.draw();
 
 
 

坐標(biāo)系

canvas 坐標(biāo)系，以左上角為(0, 0)，橫軸為 x，縱軸為 y。
如：CanvasContext.arc(100, 200, 50, 0, 2 * Math.PI);命令，就是在x: 100,y: 200為圓心處，開始畫圓。

我們可以在 canvas 中加上一些事件，來觀測它的坐標(biāo)系。

代碼示例:

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

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

 
 
 

  
  
  
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 無法做到漸變色的效果，可以選擇使用透明框，新增返回按鈕，然后進(jìn)行設(shè)置。或?qū)?navigationStyle 設(shè)置成 custom，在全屏頁面中制作導(dǎo)航欄，自定義背景色。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

  
  
  
  
  
  
  
  
  
內(nèi)容
 
 
 

 
 
 

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