HTML5中canvas元素如何繪制圖形

天將和大家分享HTML5中canvas元素的使用，有一定參考價值，希望對大家有所幫助。

【推薦課程：HTML5教程】

canvas元素

主要使用 JavaScript 在網頁上繪制圖像畫布是一個矩形區域，可以控制其每一像素而且canvas 擁有多種繪制路徑、矩形、圓形、以及添加圖像的方法，接下來將在文章中為大家詳細介紹

html代碼

矩形

fillStyle：用來給圖形添加色彩的

fillRect(x,y,width,height)

x:距離左上角的x值

y:距離左上角的y值

width，height:就是圖形的寬高

var demo=document.getElementById("demo");

var fang=demo.getContext("2d");

fang.fillStyle="pink";

fang.fillRect(0,0,200,50);

</script>

線條

moveTo:線條開始位置

lineTo:結束位置

lineWidth:線條寬度

strokeStyle:顏色

stroke:開始繪制

var demo=document.getElementById("demo");

var xian=demo.getContext("2d");

xian.moveTo(10,10);

xian.lineTo(100,100);

xian.lineWidth=2;

xian.strokeStyle="pink";

xian.stroke();

圓形

beginPath():開始路徑

arc(x,y,r,sAngle,eAngle,counterclockwise)

x,y：為圓的中心點坐標

r：圓的半徑

sAngle,eAngle：圓的起始角和結束角

counterclockwise：可寫可不寫規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。

var demo=document.getElementById("demo");

var yuan=demo.getContext("2d");

yuan.beginPath();

yuan.arc(100,100,50,0,2*Math.PI);

yuan.strokeStyle="pink";

yuan.stroke();

圖形插入

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

sx,sy：剪切的 x，y 坐標位置

swidth,sheight：被剪切圖像的寬度和高度

x,y：在畫布上放置圖像的 x，y 坐標位置

width,height：要使用的圖像的寬度和高度

var demo=document.getElementById("demo");

var img1=document.getElementById("img1");

var img=demo.getContext("2d");

img1.onload=function(){

img.drawImage(img1,10,10,100,120)

總結：以上就是本篇文章的全部內容了，希望通過本篇文章對大家有所幫助。

以上就是HTML5中canvas元素如何繪制圖形的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can = document.getElementById("mycanvas");
                var ctx = can.getContext("2d");
                ctx.shadowOffsetX = 10;
                ctx.shadowBlur = 10;
                ctx.shadowColor="#000";
                ctx.fillStyle = "pink";  // 填充顏色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

了解更多可查看鏈接：https://www.9xkd.com/

考察應試者CSS基礎的時候，有時候會要求用CSS繪制一些基礎圖形。今天向大家介紹一下平行四邊形的繪制，如果用到了不用謝我。

一種思路是使用一個矩形的div和兩個三角形拼接來形成平行四邊形，當然可以使用偽類，這樣就不用使用三個元素了。

另一種是使用skew屬性。

舉個栗子：

 // css
 .parallelogram {
 display: inline-block;
 padding: 50px 100px;
 border: 1px solid black;
 transform: skew(-20deg);
 } //html <div class="parallelogram"></div>

平行四邊形

在線咨詢

上一篇：CSS樣式之選擇器
下一篇：你真的學懂一個案例了嗎？丨廣告案例分析進階版

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5中canvas元素如何繪制圖形

圖形陰影繪制的屬性

給圖形繪制陰影

您的項目需求