JavaScript canvas繪制漸變顏色的矩形
本文實例為大家分享了canvas繪制漸變顏色的矩形的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } /* .linearGradient{ width: 400px; height: 100px; background-image: linear-gradient(to right,pink,blue); }*/ </style> </head> <body> <div class="linearGradient"></div> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */ /*也可以使用一個漸變的方案了填充矩形*/ /*創(chuàng)建一個漸變的方案*/ /*漸變是由長度的*/ /*x0y0 起始點 x1y1 結(jié)束點 確定長度和方向*/ var linearGradient = ctx.createLinearGradient(100,100,500,400); linearGradient.addColorStop(0,'pink'); //linearGradient.addColorStop(0.5,'red'); linearGradient.addColorStop(1,'blue'); ctx.fillStyle = linearGradient; ctx.fillRect(100,100,400,100); /*pink---->blue*/ /*回想線性漸變---->要素 方向 起始顏色 結(jié)束顏色 */ /*通過兩個點的坐標(biāo)可以控制 漸變方向*/ </script> </body> </html>
運行結(jié)果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Windows下支持自動更新的Electron應(yīng)用腳手架的方法
這篇文章主要介紹了Windows下支持自動更新的Electron應(yīng)用腳手架的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12JavaScript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框?qū)嵗a
這篇文章主要介紹了javascript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框的實例代碼,非常不錯,具有參考借鑒價值 ,需要的朋友可以參考下2017-06-06使用JavaScript實現(xiàn)Java的List功能(實例講解)
使用JavaScript實現(xiàn)Java的List功能(實例講解)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11ExtJs使用自定義插件動態(tài)保存表頭配置(隱藏或顯示)
這篇文章主要介紹了ExtJs使用自定義插件動態(tài)保存表頭配置(隱藏或顯示) ,需要的朋友可以參考下2018-09-09JavaScript錯誤處理try..catch...finally+涵蓋throw+TypeError+RangeEr
這篇文章主要介紹了JavaScript錯誤處理:try..catch...finally+涵蓋throw+TypeError+RangeError,文章內(nèi)容具有一定的參考價值,需要的小伙伴可以參考一下,希望對你有所幫助2021-12-12JavaScript實現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04