重慶達內IT培訓
美國上市IT培訓機構

15023458194

重慶web前端培訓:圖像樣式

  • 時間:2021-03-30 13:32
  • 發布:重慶達內
  • 來源:重慶達內

⑴ 圖像平鋪

語法:ctx.createPattern(image,type);

說明:該方法接受2個參數,參數image是一個image對象,或一個canvas對象;

參數type用于設置圖像布局的類型,包括 repeat(完全平鋪)、repeat-x(橫向平鋪)、

repeat-y(縱向平鋪)、no-repeat(不平鋪)。

該方法返回一個對象,賦予“fillStyle”后,即可進行填充繪制。

注意:為確保進行圖像繪制之前,圖片加載已經完成,需要使用“onload”事件!

代碼示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <canvas id="canvasImage" width="1500" height="800"></canvas>
    <script>
        var canvas=document.getElementById('canvasImage');
        var ctx=canvas.getContext('2d');
    //  創建圖片對象
        var img=new Image();
        img.src='../Images/rotation01.jpg';
    //  創建圖片加載事件
        img.onload=function () {
            var imgPtn=ctx.createPattern(img,'repeat');     //創建圖像樣式對象
            ctx.fillStyle=imgPtn;
            ctx.fillRect(10,10,500,600);}
    </script>
</body>

⑵ 圖像陰影

語法:ctx.shadowOffsetX||Y=value;  //設置水平或垂直方向陰影大小

ctx.shadowBlur=value;    //設置陰影模糊程度

ctx.shadowColor='color';    //設置陰影顏色

說明:與Pattern設置不同,Shadow的樣式都是針對“ctx”對象進行設置的,

引入圖片時使用“drawImage()”方法。

代碼示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <canvas id="canvasImage" width="1500" height="800"></canvas>
    <script>
        var canvas=document.getElementById('canvasImage');
        var ctx=canvas.getContext('2d');
    //  創建圖片對象
        var img=new Image();
        img.src='../Images/rotation01.jpg';
    //  創建圖片加載事件
        img.onload=function () {
            ctx.shadowOffsetX=15;
            ctx.shadowOffsetY=10;
            ctx.shadowBlur=7;
            ctx.shadowColor='#333';
            ctx.drawImage(img, 10,10);
    </script>
</body>
上一篇:重慶web前端培訓班:圖片裁切
下一篇:重慶web前端培訓機構:jQuery中的入口函數

重慶WEB前端培訓班:箭頭函數的副作用

重慶web前端培訓機構:jQuery中的入口函數

重慶web前端培訓:圖像樣式

重慶web前端培訓班:圖片裁切

  • 關注微信公眾號

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
江西省

貴州省

廣西省

海南省

免费V片无码动漫在线观看网址-男人的天堂无码动漫av