微信小程序基于canvas漸變實現(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ā)有所幫助。
相關文章
JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05JavaScript將頁面表格導出為Excel的具體實現(xiàn)
如何將頁面表格導出為Excel,這在日常工作中很常見,下面為大家詳細的介紹下使用JavaScript是如何實現(xiàn)的2013-12-12