首頁 > web前端 > H5教程 > 教你用HTML5畫一個​​饞人的西瓜

教你用HTML5畫一個​​饞人的西瓜

藏色散人
發布: 2021-08-11 14:46:29
原創
2377 人瀏覽過

炎炎夏日,怎麼能少了冰涼的西瓜呢?當我們掌握某程式功能時,總是想要實現奇奇怪怪的效果,哈哈,那麼今天正如標題所言,咱們就用HTML5來實現一個半圓弧西瓜(不帶籽嘻嘻)。

不知道各位對HTML5掌握了多少,或許大家可以在本地自己寫一個能實現半圓弧西瓜樣式的程式碼,小小提醒一下:西瓜典型的配色就是紅配綠~

下面是我給的一個實作方法,大家可以直接複製程式碼在本地測試:

程式碼如下:

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function()
        {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");
            drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
            function drawArc(xPos, yPos, radius, startAngle, endAngle,
                             anticlockwise, lineColor, fillColor)
            {
                var startAngle = startAngle * (Math.PI/180);
                var endAngle = endAngle * (Math.PI/180);
                var radius = radius;

                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
                context.fill();
                context.stroke();
            }
        }
    </script>
</head>
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "210" height = "130"
            style = "border:2px solid black">
        你的浏览器目前不支持HTML5 Canvas。
    </canvas>
</div>
</body>
</html>
登入後複製

效果如下:

教你用HTML5畫一個​​饞人的西瓜

#算吧算~是饞人的西瓜哈哈哈~

這裡主要需要大家掌握的一個知識點就是HTML5 canvas元素;

HTML5 canvas元素用於繪製圖形、動畫、動態圖像、圖表、文字以增強使用者體驗。

canvas簡介:HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖片。畫布是一個矩形區域,您可以控制其每個像素。 canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

我們可以使用arc()方法在畫布上繪製弧線。

arc() 的語法

arc(x, y, radius, startAngle, endAngle, anticlockwise)
登入後複製

這裡,x和y是圓心的座標,radius是圓的半徑,startAngle和endAngle參數是弧的起點和終點,以距x 軸的弧度為單位。此逆時針參數是一個布林值,當真實繪製圓弧逆時針,否則在順時針方向。

相關推薦:《HTML影片教學》《javascript基礎教學

以上是教你用HTML5畫一個​​饞人的西瓜的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板