欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字

 更新時間：2021年03月16日 17:23:31   作者：believehxl  
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用canvas創(chuàng)建帶有陰影的圖形和文字，供大家參考，具體內(nèi)容如下

ctx.shadowBlur=20;設(shè)置陰影模糊范圍。
ctx.shadowColor;設(shè)置陰影模糊顏色。

還可以利用

shadowOffsetX屬性設(shè)置陰影與圖形的水平距離。
shadowOffsetY屬性設(shè)置陰影與圖形的垂直距離。

代碼：

<!DOCTYPE html>
<html>
<head>
 <title>創(chuàng)建帶有陰影的圖形和文字</title>
</head>
<body>
<h3 align="center">放射狀漸變色</h3>
<hr>
<canvas id="myc1" width="800" height="600"></canvas>
<script type="text/javascript">
 var myc = document.getElementById("myc1");//繪制一個新畫布
 var ctx = myc.getContext("2d"); //設(shè)置繪圖環(huán)境為2d
 var myg = ctx.createRadialGradient(130,200,0,130,200,90);
 //addColorStop方法 第一個參數(shù)為圖像內(nèi)的百分比 第二個參數(shù)為顏色
 myg.addColorStop(0,"white");
 myg.addColorStop(0.5,"pink"); 
 myg.addColorStop(0.6,"green");
 myg.addColorStop(0.4,"blue");
 ctx.fillStyle=myg;
 ctx.shadowColor="black"; //陰影顏色
 ctx.shadowBlur=20; //陰影模糊范圍
 ctx.arc(130,200,100,0,Math.PI*2); //繪制一個新圓
 ctx.fill();

 ctx.beginPath();
 var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
 myg1.addColorStop(0,"blue");
 myg1.addColorStop(0.6,"green");
 myg1.addColorStop(1,"red");
 ctx.fillStyle=myg1; 
 ctx.font="50px 黑體"; //設(shè)置字體大小和字體樣式
 ctx.shadowBlur=50; //設(shè)置陰影模糊范圍
 ctx.shadowColor="yellow";//陰影顏色；
 ctx.shadowOffsetX=30; //水平方向網(wǎng)上偏移；
 ctx.shadowOffsetY=-30;//垂直方向往下偏移；
 ctx.fillText("放射性漸變文字",350,200);


</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 多個表單中如何獲得這個文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼

    多個表單中如何獲得這個文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼

    假設(shè)一個網(wǎng)頁里有多個表單，其中一個表單里有文件上傳，問題是如何獲得這個文件上傳的網(wǎng)址呢，接下來為大家介紹下實(shí)現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你
    2013-03-03
  • JavaScript canvas實(shí)現(xiàn)流星特效

    JavaScript canvas實(shí)現(xiàn)流星特效

    這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)流星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-05-05
  • JavaScript中btoa和atob全局函數(shù)示例詳解

    JavaScript中btoa和atob全局函數(shù)示例詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript中btoa和atob全局函數(shù)的相關(guān)資料,atob和btoa是window對象的兩個函數(shù),用來編碼解碼Base64,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-08-08
  • Bootstrap按鈕組件詳解

    Bootstrap按鈕組件詳解

    按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運(yùn)作。通過本文給大家詳細(xì)介紹Bootstrap按鈕組件，感興趣的朋友一起學(xué)習(xí)吧
    2016-04-04
  • uni-app微信小程序之紅包雨活動完整源碼

    uni-app微信小程序之紅包雨活動完整源碼

    最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實(shí)現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • 類似于QQ的右滑刪除效果的實(shí)現(xiàn)方法

    類似于QQ的右滑刪除效果的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄愃朴赒Q的右滑刪除效果的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • js獲得頁面的高度和寬度的方法

    js獲得頁面的高度和寬度的方法

    做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下
    2014-02-02
  • 基于代數(shù)方程庫Algebra.js解二元一次方程功能示例

    基于代數(shù)方程庫Algebra.js解二元一次方程功能示例

    這篇文章主要介紹了基于代數(shù)方程庫Algebra.js解二元一次方程功能,結(jié)合具體實(shí)例形式分析了方程庫Algebra.js計(jì)算方程的具體使用技巧,需要的朋友可以參考下
    2017-06-06
  • 前端MQTT詳細(xì)使用的兩種方法

    前端MQTT詳細(xì)使用的兩種方法

    MQTT(消息隊(duì)列遙測傳輸協(xié)議),是一種基于發(fā)布/訂閱(publish/subscribe)模式的通訊協(xié)議,該協(xié)議構(gòu)建于TCP/IP協(xié)議上,這篇文章主要給大家介紹了關(guān)于前端MQTT詳細(xì)使用的兩種方法,需要的朋友可以參考下
    2024-07-07
  • js wmp操作代碼小結(jié)(音樂連播功能)

    js wmp操作代碼小結(jié)(音樂連播功能)

    js對于wmp的一些屬性與方法，方便大家控制音樂的播放的一些細(xì)節(jié)
    2008-11-11

最新評論