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

canvas 陰影和圖形變換的示例代碼

  發(fā)布時(shí)間：2018-01-02 13:56:44   作者：雅玲啞鈴   我要評論
這篇文章主要介紹了canvas 陰影和圖形變換的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了canvas 陰影和圖形變換的示例代碼，分享給大家，具體如下：

一、陰影設(shè)置

1、陰影的顏色：值為標(biāo)準(zhǔn)的CSS顏色值，用于設(shè)定陰影顏色效果，默認(rèn)是全透明的黑色

context.shadowColor = color;

2、陰影模糊度：用戶設(shè)定陰影的模糊程度，其數(shù)值不跟像素掛鉤，默認(rèn)為0

context.shadowBlur = 5;

3、陰影的偏移：

shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離。負(fù)值表示陰影會(huì)往上或左延伸，正值則表示會(huì)往下或右延伸，它們默認(rèn)都為 0

context.shadowOffsetX = 10; //正值：往右
context.shadowOffsetY = 10;  //正值：往下

4、設(shè)置文字陰影的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 50px 微軟雅黑";
        context.fillStyle="red";
        //陰影的顏色
        context.shadowColor = "orangered";
        //陰影模糊度
        context.shadowBlur = 20;
        //陰影的偏移
        context.shadowOffsetX = 10; //正值：往右
        context.shadowOffsetY = 10;  //正值：往下
        context.fillText("你好",100,100);
    </script>
</html>


 

二、圖形變換

我們之前在2D變換中也學(xué)習(xí)過這些知識(shí)，但是我們canvas圖形變換有所不同，不同點(diǎn)就是這里的變換并不是變換圖形，而是變換坐標(biāo)系，因此，我們在變換完一個(gè)圖形之后，坐標(biāo)系就發(fā)生變換了，那么我們?nèi)绻僦苯永L圖的話就會(huì)出現(xiàn)問題，下面我們來具體是什么情況吧

1、為了驗(yàn)證我們上面的說法，我們來看一個(gè)例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直線線表示開始的x/y軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,800);
        context.stroke();
        //原矩形：藍(lán)色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(0,0,50,50);
        context.fill();
        //平移矩形：粉色
        context.beginPath();
        context.translate(200,0)  //正：往右、下
        context.fillStyle = "deeppink";
        context.fillRect(0,0,50,50);
        context.fill();
        //用藍(lán)色直線表示平移以后的坐標(biāo)軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(400,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,400);
        context.stroke();
    </script>
</html>

得到如下效果：證明圖形變換以后是改變了坐標(biāo)系的


 

2、旋轉(zhuǎn)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直線表示平移以后的坐標(biāo)軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(0,800);
        context.stroke();
        //原圖：藍(lán)色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill(); 
        //旋轉(zhuǎn)：綠色
        context.beginPath();
        context.fillStyle = "limegreen";
        context.rotate(Math.PI/4);
        context.fillRect(100,0,50,50);
        //用藍(lán)色直線表示平移以后的坐標(biāo)軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(0,800);
        context.stroke();
    </script>
</html>

效果如下：


 

說明我們圖形默認(rèn)是繞canvas坐標(biāo)系原點(diǎn)旋轉(zhuǎn)的，圖形在旋轉(zhuǎn)的過程中，坐標(biāo)系也會(huì)跟著旋轉(zhuǎn)

3、圖形縮放

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直線線表示開始的坐標(biāo)系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原圖：藍(lán)色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //縮放：粉色  ,放大/小坐標(biāo)系，圖形大小也縮放
        context.scale(2,1);   //第一個(gè)參數(shù)是X軸縮放比例，第二個(gè)參數(shù)是Y軸縮放比例
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
    //用藍(lán)色直線表示平移以后的坐標(biāo)軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

效果如下：


 

我們可以看到，我們在放大X軸圖形的寬度時(shí)，我們的坐標(biāo)系的X軸也跟著放大了

那我們在對canvas圖形做變換之后，怎么才能重新再canvas上繪制我們我們想要的圖形而又不用繁瑣的方式將他改變的坐標(biāo)系恢復(fù)呢？
 

剛好canvas有狀態(tài)的保存和獲取

比如我們拿上面寫過的例子進(jìn)行演示一下狀態(tài)的保存和獲取效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //用黑色直線線表示開始的坐標(biāo)系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原圖：藍(lán)色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //縮放：粉色  ,放大/小坐標(biāo)系，圖形大小也縮放
        context.save();
        context.scale(2,1);   //第一個(gè)參數(shù)是X軸縮放比例，第二個(gè)參數(shù)是Y軸縮放比例
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
        context.restore();
    //用藍(lán)色直線表示平移以后的坐標(biāo)軸
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

正如你看到的效果圖，我們在縮放之前保存了坐標(biāo)系的狀態(tài)，也就是一開始未做任何變動(dòng)的狀態(tài)，然后在圖像縮放之后我們又將這種狀態(tài)獲取到，也就是回到一開始未做任何變動(dòng)的狀態(tài)，這就是狀態(tài)的保存和獲取，這樣就可以解決我們圖形變換對坐標(biāo)系的影響了。
 

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

相關(guān)文章

  • HTML5 canvas基本繪圖之繪制陰影效果

    <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制陰影方法，感興趣的小伙伴們可以參考一下
    2016-06-27

  • 實(shí)例講解使用HTML5 Canvas繪制陰影效果的方法

    這篇文章主要介紹了使用HTML5 Canvas繪制陰影效果的方法,包括一個(gè)3D拉影+邊緣模糊效果文字的編寫例子,在陰影效果的利用上進(jìn)一步深入,需要的朋友可以參考下
    2016-03-25

  • html5實(shí)現(xiàn)canvas陰影效果示例

    這篇文章主要介紹了html5實(shí)現(xiàn)canvas陰影效果示例
    2014-05-07

  • HTML5 Canvas陰影使用方法實(shí)例演示

    HTML5 Canvas中提供了設(shè)置陰影的四個(gè)屬性值可以實(shí)現(xiàn)陰影文字、3D拉影效果、邊緣模糊效果文字，具體的演示代碼如下，想學(xué)習(xí)的朋友可以參考下
    2013-08-02

  • canvas多重陰影發(fā)光效果實(shí)現(xiàn)

    這篇文章主要介紹了canvas多重陰影發(fā)光效果實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-04-19

最新評論