這篇文章將為大家詳細(xì)講解有關(guān)使用canvas怎么對陰影和圖形進(jìn)行變換，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10年品質(zhì)，值得信賴！
一、陰影設(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ù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認(rèn)都為 0
context.shadowOffsetX = 10; //正值：往右
context.shadowOffsetY = 10; //正值：往下
4、設(shè)置文字陰影的例子
canvas{
border:1px solid red;
}
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);
二、圖形變換
我們之前在2D變換中也學(xué)習(xí)過這些知識，但是我們canvas圖形變換有所不同，不同點就是這里的變換并不是變換圖形，而是變換坐標(biāo)系，因此，我們在變換完一個圖形之后，坐標(biāo)系就發(fā)生變換了，那么我們?nèi)绻僦苯永L圖的話就會出現(xiàn)問題，下面我們來具體是什么情況吧
1、為了驗證我們上面的說法，我們來看一個例子
canvas{
border:1px solid red;
}
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();
得到如下效果：證明圖形變換以后是改變了坐標(biāo)系的
2、旋轉(zhuǎn)
canvas{
border:1px solid red;
}
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();
效果如下：
說明我們圖形默認(rèn)是繞canvas坐標(biāo)系原點旋轉(zhuǎn)的，圖形在旋轉(zhuǎn)的過程中，坐標(biāo)系也會跟著旋轉(zhuǎn)
3、圖形縮放
canvas{
border:1px solid red;
}
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); //第一個參數(shù)是X軸縮放比例，第二個參數(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();
效果如下：
我們可以看到，我們在放大X軸圖形的寬度時，我們的坐標(biāo)系的X軸也跟著放大了
那我們在對canvas圖形做變換之后，怎么才能重新再canvas上繪制我們我們想要的圖形而又不用繁瑣的方式將他改變的坐標(biāo)系恢復(fù)呢？
剛好canvas有狀態(tài)的保存和獲取
比如我們拿上面寫過的例子進(jìn)行演示一下狀態(tài)的保存和獲取效果
canvas{
border:1px solid red;
}
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); //第一個參數(shù)是X軸縮放比例，第二個參數(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();
關(guān)于使用canvas怎么對陰影和圖形進(jìn)行變換就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
網(wǎng)站欄目：使用canvas怎么對陰影和圖形進(jìn)行變換
URL標(biāo)題：
http://weahome.cn/article/gscsoh.html
重慶分公司
重慶分公司
