成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

微信小程序Taro開(kāi)發(fā)(3)：canvas制作鐘表

cuieney / 1858人閱讀

摘要：制作鐘表分成兩部分，一部分是表盤(pán)，一部分是時(shí)針?lè)轴樏脶樀淖邉?dòng)，首先，先繪制表盤(pán)繪制表盤(pán)圓半徑設(shè)置坐標(biāo)軸原點(diǎn)圓心表盤(pán)外圓表盤(pán)刻度大格表盤(pán)刻度小格表盤(pán)時(shí)刻數(shù)字設(shè)置字體樣式字體上下居中，繪制時(shí)間利用三角函數(shù)計(jì)算字體坐標(biāo)表達(dá)式開(kāi)始繪

制作鐘表分成兩部分，一部分是表盤(pán)，一部分是時(shí)針、分針、秒針的走動(dòng)，首先，先繪制表盤(pán)：

// 繪制表盤(pán)
  getDialClock = () => {
    const width = this.state.width;
    const height = this.state.height;
    const ctx = Taro.createCanvasContext("myCanvas", this.$scope);
    const R =  width/2 - 30;//圓半徑
    const r = R - 15;

    //設(shè)置坐標(biāo)軸原點(diǎn)
    ctx.translate(width/2, height/2);
    ctx.save();

    // 圓心
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, 2 * Math.PI, true);
    ctx.fill();
    ctx.closePath();

    // 表盤(pán)外圓
    ctx.setLineWidth(2);
    ctx.beginPath();
    ctx.arc(0, 0, R, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.stroke();

    // 表盤(pán)刻度（大格）
    ctx.beginPath();
    ctx.setLineWidth(5);
    for(var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.moveTo(R, 0);
      ctx.lineTo(r, 0);
      ctx.stroke();
    }
    ctx.closePath();

    // 表盤(pán)刻度（小格）
    ctx.beginPath();
    ctx.setLineWidth(1);
    for(var i = 0; i < 60; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 30);
      ctx.moveTo(R, 0);
      ctx.lineTo(R-10, 0);
      ctx.stroke();
    }
    ctx.closePath();

    // 表盤(pán)時(shí)刻（數(shù)字）
    ctx.beginPath();
    ctx.setFontSize(16)//設(shè)置字體樣式
    // ctx.setTextBaseline("middle");//字體上下居中，繪制時(shí)間
    for(let i = 1; i < 13; i++) {
      //利用三角函數(shù)計(jì)算字體坐標(biāo)表達(dá)式
      var x = (r-10) * Math.cos(i * Math.PI / 6 - Math.PI/2);
      var y = (r-10) * Math.sin(i * Math.PI / 6 - Math.PI/2);
      let sz = i + "";
      ctx.fillText(sz, x - 5, y + 5, 15);
    }
    ctx.closePath();


    // 開(kāi)始繪制
    ctx.draw();
  }

表盤(pán)繪制完畢，再繪制時(shí)針，分針，秒針的運(yùn)動(dòng)，這里需要新建一個(gè)組件來(lái)專門(mén)管理這個(gè)時(shí)間運(yùn)動(dòng)，在組件中，如下：

// 繪制 針表
  drawTime = () => {
    const width = this.props.dataRes.width;
    const height = this.props.dataRes.height;

    const ctx = Taro.createCanvasContext("timeId", this.$scope);
    const R =  width/2 - 30;//圓半徑

     //設(shè)置坐標(biāo)軸原點(diǎn)
    ctx.translate(width/2, height/2);
    ctx.save();

    const t = new Date();//獲取當(dāng)前時(shí)間
    let h = t.getHours();//獲取小時(shí)
    h = h>12?(h-12):h;//將24小時(shí)制轉(zhuǎn)化為12小時(shí)制
    const m = t.getMinutes();//獲取分針
    const s = t.getSeconds();//獲取秒

   //繪制時(shí)針
    ctx.beginPath();
    ctx.setStrokeStyle("green")
    ctx.setLineWidth(10);
    ctx.rotate((Math.PI/6)*(h+m/60+s/3600)-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-90,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();

    // 繪制分針
    ctx.beginPath();
    ctx.setStrokeStyle("gold")
    ctx.setLineWidth(5);
    ctx.rotate((Math.PI/30)*(m+s/3600)-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-60,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();

    // 繪制秒針
    ctx.beginPath();
    ctx.setStrokeStyle("red")
    ctx.setLineWidth(1);
    ctx.rotate((Math.PI/30)*s-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-20,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();


    ctx.draw();

  }

結(jié)果顯示：

源碼地址：
https://gitee.com/hope93/canv...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100162.html

相關(guān)文章

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

    摘要：多端統(tǒng)一開(kāi)發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項(xiàng)目倉(cāng)庫(kù)官方文檔項(xiàng)目倉(cāng)庫(kù)官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動(dòng)小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開(kāi)發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...

    toddmark 評(píng)論0 收藏0

  • 微信小程序Taro開(kāi)發(fā)(2)：生命周期及開(kāi)發(fā)中注意點(diǎn)

    摘要：入口文件繼承自組件基類，它同樣擁有組件生命周期，但因?yàn)槿肟谖募奶厥庑?，他的生命周期并不完整，如。支持組件化開(kāi)發(fā)，組件代碼可以放在任意位置，不過(guò)建議放在下的目錄中。 生命周期 componentWillMount 在微信小程序中這一生命周期方法對(duì)應(yīng)頁(yè)面的onLoad或入口文件app中的onLaunch componentDidMount 在微信小程序中這一生命周期方法對(duì)應(yīng)頁(yè)面的onRe...

    morgan 評(píng)論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

    摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開(kāi)發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...

    kun_jian 評(píng)論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

    摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開(kāi)發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...

    J4ck_Chan 評(píng)論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

    摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開(kāi)發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...

    Travis 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<