亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序基于canvas漸變實現(xiàn)的彩虹效果示例

 更新時間:2019年05月03日 11:41:32   作者:_zengZeng  
這篇文章主要介紹了微信小程序基于canvas漸變實現(xiàn)的彩虹效果,結合實例形式分析了微信小程序線性漸變及圓形漸變的相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了微信小程序基于canvas漸變實現(xiàn)的彩虹效果。分享給大家供大家參考,具體如下:

微信小程序提供了兩種漸變的方式:

    createLinearGradient(x,y,x1,y1)創(chuàng)建一個線性的漸變。

        x,y           起點坐標

        x1,y1        終點坐標

    createCircularGradient(x,y,r)創(chuàng)建一個從圓心開始的漸變。

        x,y            圓心坐標

        r                 半徑

創(chuàng)建了漸變對象之后,必須添加兩個或者兩個以上的漸變點;

addColorStop(position, color)方法用于指定顏色漸變點的位置和顏色,位置必須位于0到1之間。

一般用setFillStyle()來設置漸變,然后進行畫圖描述。

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')
// Create linear gradient
const grd = ctx.createLinearGradient(0,120, 120, 0)
grd.addColorStop(0, '#FFFF00')
grd.addColorStop(1, '#FF0000')
// Fill with gradient
ctx.setFillStyle(grd);//將漸變色渲染入正方形
ctx.fillRect(20, 20, 120, 120);//起點坐標為(20,20),長寬都為120px的正方形
ctx.draw();

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createCircularGradient(170, 170, 150);
grd.addColorStop(0.79, '#fff')
grd.addColorStop(0.81, '#8B00FF')
grd.addColorStop(0.83, '#0000FF')
grd.addColorStop(0.85, '#00FFFF')
grd.addColorStop(0.87, '#00FF00')
grd.addColorStop(0.89, '#FFFF00')
grd.addColorStop(0.93, '#FF7F00')
grd.addColorStop(0.95, '#FF0000')
grd.addColorStop(1, '#fff')
// Fill with gradient
ctx.setFillStyle(grd)//將漸變色渲染入矩形
ctx.fillRect(20, 20, 300,120)//起點坐標為(20,20),長300px寬120px的矩形
ctx.draw()

補充:addColorStop的position為漸變點的位置,該位置是顏色設置的最中心處。

該文如有描述不當,煩請各位道友指摘。

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關文章

  • js 處理URL實用技巧

    js 處理URL實用技巧

    escape()、encodeURI()、encodeURIComponent()三種方法都能對一些影響URL完整性的特殊字符進行過濾。
    2010-11-11
  • PHPExcel中的一些常用方法匯總

    PHPExcel中的一些常用方法匯總

    這篇文章主要介紹了PHPExcel中的一些常用方法匯總,本文直接給出操作代碼實例,代碼中對常用方法給出了注釋,需要的朋友可以參考下
    2015-01-01
  • JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別

    JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別

    這篇文章主要給大家介紹了關于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • 深入理解移動前端開發(fā)之viewport

    深入理解移動前端開發(fā)之viewport

    這篇文章主要介紹了移動前端開發(fā)之viewport的相關知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • TypeScript 學習筆記之基本類型

    TypeScript 學習筆記之基本類型

    TypeScript 是 JavaScript 的超集,TypeScript 經(jīng)過編譯之后都會生成 JavaScript 代碼。TypeScript 最大的特點就是類型化,因此才叫做 TypeScript。比起弱類型的 JavaScript,類型化的 TypeScript 顯得更加容易維護。
    2015-06-06
  • JavaScript將頁面表格導出為Excel的具體實現(xiàn)

    JavaScript將頁面表格導出為Excel的具體實現(xiàn)

    如何將頁面表格導出為Excel,這在日常工作中很常見,下面為大家詳細的介紹下使用JavaScript是如何實現(xiàn)的
    2013-12-12
  • 詳解javascript數(shù)組去重問題

    詳解javascript數(shù)組去重問題

    這篇文章主要介紹了詳解javascript數(shù)組去重問題,根據(jù)面試時做的一道數(shù)組去重問題的解題思路整理的,分享給大家。
    2015-11-11
  • JavaScript日期和時間的格式化及其它常用處理方法

    JavaScript日期和時間的格式化及其它常用處理方法

    這篇文章主要給大家介紹了關于JavaScript日期和時間的格式化及其它常用處理方法,JavaScript中可以使用Date對象來表示日期和時間,如果需要格式化日期和時間,可以使用Date對象的幾個方法和一些字符串操作方法來實現(xiàn),需要的朋友可以參考下
    2023-09-09
  • JS拖拽插件實現(xiàn)步驟

    JS拖拽插件實現(xiàn)步驟

    實現(xiàn)JS拖拽插件主要從六個方面做介紹:一、js拖拽插件的原理,二、根據(jù)原理實現(xiàn)的最基本效果,三、代碼抽象與優(yōu)化,四、擴展:有效的拖拽元素,五、性能優(yōu)化和總結,六、jquery插件化 ,需要的朋友可以參考下
    2015-08-08
  • js下用gb2312編碼解碼實現(xiàn)方法

    js下用gb2312編碼解碼實現(xiàn)方法

    在js中將中文用gb2312編碼。如,“我”編碼后應該是“%CE%D2”。
    2009-12-12

最新評論