首頁 web前端 H5教程 HTML5邊玩邊學(六)-汽車人,變形的詳細介紹

HTML5邊玩邊學(六)-汽車人,變形的詳細介紹

Mar 29, 2017 pm 03:07 PM

一、狀態及其保存與恢復

在這一節開始之前,我們要先理解一下什麼是狀態以及狀態的保存與復原。玩過MFC 程式的人常常可以碰到這樣的程式碼:

pOldPen=pDC->SelectObject(pNewPen)

我們在選擇新畫筆物件的同時,總是要儲存住舊畫筆對象,為什麼要這樣做呢?因為新畫筆物件只是臨時用一下,等用完了,我們想恢復到原來的畫筆配置時,如果舊的配置事先沒有被保存,這些配置就丟失了,也就沒辦法恢復了。

在HTML5 繪圖中,某一刻的狀態就是當前這一刻上下文物件的一系列屬性的配置值,只是,決定一個畫筆狀態的屬性比較少,如顏色、粗細、線型之類的,而確定上下文狀態的屬性比較多,包括下面這些:

1、當前上下文物件的移動、旋轉、縮放配置

2、當前上下文物件的strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 屬性值

#3、目前上下文物件的裁切路徑配置

上面這一系列配置決定了目前這一時刻上下文物件的狀態,其中移動、旋轉、縮放、globalCompositeOperation(組合)、裁剪下面我們馬上會講到。

二、狀態的保存與恢復

上面我們說某一刻的狀態由那麼多屬性決定,我們要保存這一刻的狀態就要把這些屬性值一個一個都保存,恢復的時候在一個一個都設定回去,那也太麻煩了。確實是這樣的,所以上下文對下提供了兩個簡單的方法,對狀態進行保存和恢復,他們是:

save( ) 和restore( )

save 和restore方法可以多次調用,每調用一次save 方法,調用時的狀態(即一系列屬性值)就會壓入一個堆疊中。

每呼叫一次 restore 方法,最後一次 save 的狀態就會恢復,也就是出棧。

想像一下彈匣,第一顆被發射出去的子彈,總是最後一個被壓入彈匣的。

 

三、變型

1、移動:translate(dx,dy)

這個方法看起來很簡單,其實它包含了一定的數學意義,你可以認為是整個座標系的原點發生了移動,新座標系下任意一點(x,y)相當於原座標系下的座標為:

x'=x+dx
y'=y+dy

如果我們呼叫ctx.translate(5,8) 改變上下文物件的座標系狀態,然後在新狀態下的點(3,2)繪圖,相當於圖像被繪製到了原始狀態下的點(8,10)處,即

x'=5+3=8
y'=5+ 2=10

也許你會問,為什麼要那麼麻煩,直接在(8,10)畫比行嗎?例如把

ctx.translate(5,8)
ctx.drawImage(img,3,2)

改成

ctx.drawImage(img,8 ,10)

這樣不是更簡單、更直接嗎?

我的理解是,移動更多的情況下是為其他圖形變換服務的,恰當的改變坐標原點可以讓圖形學計算更好理解,並帶來很大方便,下面我舉個簡單的例子,假如:

有一條線段,是x 軸正向上的一小段

y = 0 (1 <= x <= 3),

#若以座標原點為圓心,逆時針旋轉90度,則線段與y 軸正向重合,旋轉後的線段為:

x = 0 (1 <= y <= 3)

但是我們不可能每次旋轉都以原點為圓心進行旋轉,假如我們以線段的一個端點(1,0)為圓心進行旋轉,我們怎麼才能得到旋轉後線段上每一點的坐標值呢?其實這個過程可以分成三個步驟:

第一步:移動原點座標到(1,0),新的線段依然在x 軸上,但方程式變成:y = 0 (0 <= x <= 2)

第二步:以新座標系的原點為圓心進行旋轉,得到新座標系下的線段x = 0 (0 <= y <= 2)

第三步:將新座標系的原點移動到新座標系下(-1,0)處,即將原點恢復到原來的位置,此時的線段為:x = 1 (0 <= y <= 2)

第三步驟所得到的線段就是最後需要繪製的線段。

從這個例子我們可以看出來,即使在這麼簡單的情況下,如果不移動座標原點來直接計算旋轉後的圖形,也是比較困難的。

提示當你移動座標原點之前,千萬別忘了保存狀態,當然,繪製完畢後也別放了恢復狀態。

2、縮放scale(sx, sy)

這個也很簡單,sx, sy 是縮放比例因子,縮放後新座標系下任一點(x,y) 相當於原座標系下的座標為:

x' = x * sx
y' = y * sy

同樣,改變座標系統總是不要忘記儲存和復原狀態

3、旋轉rotate(A)

angle 是旋轉角度,旋轉後新座標系下任一點(x,y) 相當於原座標系下的座標為:

x' = x cosA - y sinA
y' = x sinA + y cosA

同樣,改變座標系統總是不要忘記保存和恢復狀態

4、變形transform(m11, m12, m21, m22, dx, dy)

其實前面講的移動、縮放、旋轉都是變形的特例,transform 方法的六個參數組成了一個變形矩陣,如下

m11 m21 dx
#m12 m22
# #######0######0######1#############

呼叫transform 方法就相當於用這些參數為上下文物件設定了新的變形矩陣,關於變形矩陣的具體內容可以參考圖形學相關資料,以下給出幾個簡單特例:

移動translate(dx,dy):相當於transform(1,0,0,1,dx,dy)

縮放scale(sx,xy):相當於transform(sx,0,0,sy,0,0)

#旋轉rotate(A) :相當於transform(cosA,sinA,-sinA,cosA,0,0)

以(dx,dy) 為基準點旋轉角度A:transform(cosA, sinA, -sinA, cosA, dx(1-cosA) + dysinA, dy(1-cosA) - dxsinA)

以(dx,dy) 為基準點進行(sx,sy)比例縮放:transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy))

還有很多其他更複雜的變形,大家可以參考圖形學相關資料。

下面給出一個基準點變形的例子,滑鼠在影像上的某點保持按下狀態,影像就會以該點為基準點進行縮放或旋轉,鬆開按鈕後影像復原。

提示:即縮放又旋轉這個例子,並沒有使用變形矩陣,而是用了四步驟簡單變形複合而成。效果如下:


移動-在影像上按住滑鼠並移動
基準點縮放-在影像某處按住滑鼠
基準點旋轉-在影像某點處按住滑鼠
基準點縮放同時旋轉-在影像某處按住滑鼠

 

四、組合

#所謂組合就是一個圖形繪製在另一個圖形之上,會出現什麼效果。預設的情況下是上面的圖形覆蓋了下面的圖形,稱之為 source-over 。

上下文物件總共十二中組合類型,屬性globalCompositeOperation 被用來設定組合類型,如下:globalCompositeOperation = type#type 是下面12 種字串值之一:

注意

:上面所有例子中,

藍色

方塊是

先繪製

的,即“已有的canvas 內容”, 紅色圓形是

後面繪製

,即「新圖形」。

五、裁切路徑

在第一篇文章中我們就介紹了上下文物件的兩大類繪製方法,也就是繪製線條的

stroke

系列方法和填滿區域的

fill

系列方法,其實,上下文物件還有一類別繪製方法叫做裁剪

clip

什麼是裁切呢?打個不恰當的比方吧,你用一塊布把電視機螢幕遮住了,這時候電視機螢幕上的任何變化你都看不見了。

但是,如果你布上裁剪出一塊區域,那麼至少這塊區域裡的螢幕變化你能看見。

當然

裁剪區域之外的螢幕也在不停地變化(即也在重新繪製),只是你看不見罷了

。這就是所謂的裁剪,平常在處理影像時常會遇到這種需求。

那麼什麼又是

裁切路徑

呢?上面說要在布上裁剪出一塊區域,這塊區域是怎麼來的呢?

這塊區域是在裁剪動作

clip

之前,由繪圖路徑設定的,他可以是方形、圓形、五星形和其他任何可以繪製的輪廓形狀。

所以,裁切路徑其實就是繪圖路徑,只不過這個路徑不是拿來繪圖的,而是設定顯示區域和遮蔽區域的一個分界線。

如果你不明白什麼是繪圖路徑,在前的文章 HTML5邊玩邊學(2):基礎繪圖 中有介紹。

下面的範例用了兩種方法來裁切。第一種方法顯示一來回移動的圓形裁切區域,大體流程如下:

###1、清空畫布######2、改變圓心位置######3、在新的圓心位置處設置一個圓形的裁剪區域######4、在畫布上繪製美女圖像#######由於我們不停地在新位置處設定裁剪區域,我們就能看見裁剪區域在移動,而裁剪區域之外的圖像並沒有顯示出來######我們用clip 方法設定裁剪區域,之後繪製的圖形只能顯示裁剪區域內的一部分,而裁剪區域之外總是顯示畫布的背景色。 ######假如並不想完全遮擋裁剪區域之外的圖像,例如我們想讓裁剪區域之內的圖像完全顯示出來,但是裁剪區域之外的圖像以半透明的方式顯示出來,該怎麼做呢? ######這就要用到我們上面說的組合知識了。第二中方法顯示半透明的遮擋,大體思路如下:######1、清空畫布######2、將畫布的所有區域用一種半透明的顏色填充,這裡我用的是灰色,透明度0.9######3、改變圓心位置###

4、在新的圆心位置处以 XOR 方式绘制圆,这样和圆形重叠的部分将被擦除掉
这时候我们得到的图形效果是一个半透明的画布,上面有一块完全透明的圆形区域

5、 在第 4 步的基础上,以 destination-over 方式绘制美女图像,这时候美女图像将会出现在第 4 步图形效果的下方,想象一下,正好是我们想要的效果吧?!

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas1" width="250" height="300" 

    onmousedown="trans.transform(event);"  

    onmouseup="trans.init(event);" 

    onmousemove="trans.translate(event);" 

    style="background-color:black">

    你的浏览器不支持 &lt;canvas&gt;标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="radio" name="r" id="r1" checked="checked">移动——在图像上按住鼠标并移动<br />

<input type="radio" name="r" id="r2">基准点缩放——在图像某点处按住鼠标<br />

<input type="radio" name="r"  id="r3">基准点旋转——在图像某点处按住鼠标<br />

<input type="radio" name="r"  id="r4">基准点缩放同时旋转——在图像某点处按住鼠标<br />



<canvas id="canvas3" width="250" height="300" style="background-color:black">

    你的浏览器不支持 &lt;canvas&gt;标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="button" onclick="move(1);" value="移动裁剪区域">

<input type="button" onclick="move(2);" value="移动蒙版">

<input type="button" onclick="stop();" value="停止移动"><br />



        <div>

            <table>

                <tr>

                    <td><canvas id="tut0" width="125" height="125"></canvas><br/><label id="lab0"></label></td>

                <td><canvas id="tut1" width="125" height="125"></canvas><br/><label id="lab1"></label></td>

                <td><canvas id="tut2" width="125" height="125"></canvas><br/><label id="lab2"></label></td>

                <td><canvas id="tut3" width="125" height="125"></canvas><br/><label id="lab3"></label></td>

                </tr>

                <tr>

                    <td><canvas id="tut4" width="125" height="125"></canvas><br/><label id="lab4"></label></td>

                <td><canvas id="tut5" width="125" height="125"></canvas><br/><label id="lab5"></label></td>

                <td><canvas id="tut6" width="125" height="125"></canvas><br/><label id="lab6"></label></td>

                <td><canvas id="tut7" width="125" height="125"></canvas><br/><label id="lab7"></label></td>

                </tr>

                <tr>

                    <td><canvas id="tut8" width="125" height="125"></canvas><br/><label id="lab8"></label></td>

                <td><canvas id="tut9" width="125" height="125"></canvas><br/><label id="lab9"></label></td>

                <td><canvas id="tut10" width="125" height="125"></canvas><br/><label id="lab10"></label></td>

                <td><canvas id="tut11" width="125" height="125"></canvas><br/><label id="lab11"></label></td>

                </tr>

            </table>

        </div>





<script type="text/javascript">

    //美女图的 Base64 编码

    IMG_SRC=&#39;data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwA......&#39;;//省略四十字节



    //==========================================

    //基准点变形类

    //==========================================

    function Transform(){

        //获取画布对象

        this.ctx = document.getElementById("canvas1").getContext("2d");

        //创建图像对象

        this.img=new Image();

        //指定图像源

        this.img.src=IMG_SRC;

        this.interval = null;

        //鼠标按钮状态

        this.pressed=false;

        this.init();

    }

    

    //初始化图形

    Transform.prototype.init=function(){

        //鼠标按钮状态

        this.pressed=false;

        //停止计时器

        if(this.interval) clearInterval(this.interval);

        //变化值

        this.delta = 0.06;

        //清空

        this.ctx.clearRect(0,0,250,300);

        //重绘

        this.paint();

    }

    

    //绘制图像

    Transform.prototype.paint=function(){

        var that=this;

        var img=this.img

        if(img.complete)

            that.ctx.drawImage(img,0,0);

        else 

            var interval = setInterval(function(){

                if(img.complete){

                    that.ctx.drawImage(img,0,0);

                    clearInterval(interval);

                }

            },300);

    }

    

    //鼠标按钮按下后,开始变形

    Transform.prototype.transform = function(){

        //获取基准点

        this.dx=event.offsetX;

        this.dy=event.offsetY;

        //获取基准点

        this.startx=event.offsetX;

        this.starty=event.offsetY;

        //初始缩放比例

        this.sc=1;

        //初旋转角度

        this.angle=0;

        

        var that=this;

        if(document.getElementById("r1").checked)

            //鼠标按钮状态

            this.pressed=true;

        else if(document.getElementById("r2").checked)

            this.interval = setInterval(function(){that.scale()},50);

        else if((document.getElementById("r3").checked))

            this.interval = setInterval(function(){that.rotate()},50);

        else 

            this.interval = setInterval(function(){that.scaleAndRotate()},50);

    }

    

    //移动

    Transform.prototype.translate = function(){

        this.ddx=event.offsetX-this.startx;

        this.ddy=event.offsetY-this.starty;

        if(this.pressed){

            //清空

            this.ctx.clearRect(0,0,250,300);

            //保存状态

            this.ctx.save();

            //平移

            this.ctx.translate(this.ddx,this.ddy);

            //重绘

            this.paint();

            //绘制基准点

            this.ctx.fillStyle="red";

            this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

            //恢复状态

            this.ctx.restore();

        }

    }



    //缩放变形

    Transform.prototype.scale = function(){

        //清空

        this.ctx.clearRect(0,0,250,300);

        //改变缩放比例

        this.sc=this.sc - this.delta;

        if(this.sc<0.2 || this.sc>2) 

            this.delta = -this.delta;

        //保存状态

        this.ctx.save();

        //以 (dx,dy) 为基准点进行 (sx,sy)比例缩放:transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy))

        this.ctx.transform(this.sc, 0, 0, this.sc, this.dx*(1-this.sc), this.dy*(1-this.sc))

        //用新的变形矩阵重绘

        this.paint();

        //绘制基准点

        this.ctx.fillStyle="red";

        this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

        //恢复状态

        this.ctx.restore();

    }

    

    //旋转变形

    Transform.prototype.rotate = function(){

        //清空

        this.ctx.clearRect(0,0,250,300);

        //改变缩放比例

        var PI = Math.PI;

        this.angle=this.angle + PI/60;

        //保存状态

        this.ctx.save();

        //以 (dx,dy) 为基准点旋转角度 A:transform(cosA, sinA, -sinA, cosA, dx(1-cosA) + dysinA, dy(1-cosA) - dxsinA)

        this.ctx.transform(Math.cos(this.angle), Math.sin(this.angle), 

                -Math.sin(this.angle), Math.cos(this.angle), 

                this.dx*(1-Math.cos(this.angle)) + this.dy*Math.sin(this.angle), 

                this.dy*(1-Math.cos(this.angle)) - this.dx*Math.sin(this.angle))

        //用新的变形矩阵重绘

        this.paint();

        //绘制基准点

        this.ctx.fillStyle="red";

        this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

        //恢复状态

        this.ctx.restore();

    }

    

    //即缩放又旋转变形,没有使用变形矩阵

    Transform.prototype.scaleAndRotate = function(){

        //清空

        this.ctx.clearRect(0,0,250,300);

        //改变缩放比例

        this.sc=this.sc - this.delta;

        if(this.sc<0.2 || this.sc>2) 

            this.delta = -this.delta;

        var PI = Math.PI;

        this.angle=this.angle + PI/60;

        //保存状态

        this.ctx.save();

        //先移动原点到基点

        this.ctx.translate(this.dx,this.dy);

        this.ctx.scale(this.sc,this.sc);

        this.ctx.rotate(this.angle);

        this.ctx.translate(-this.dx,-this.dy);

        //用新的变形矩阵重绘

        this.paint();

        //绘制基准点

        this.ctx.fillStyle="red";

        this.ctx.fillRect(this.dx-5,this.dy-5,10,10);

        //恢复状态

        this.ctx.restore();

    }

    

    var trans = new Transform();

    

    //==========================================

    function Clip(){

        var canvas = document.getElementById("canvas3");

        this.ctx = canvas.getContext("2d");

        this.img=new Image();

        this.img.src=IMG_SRC;

        //移动方向

        this.delta=[3,3];

        //起始点

        this.pos_x = 225;

        this.pos_y = 120;

        //半径

        this.radius = 40;

        //画布的长和宽

        this.w = parseInt(canvas.getAttribute("width"));

        this.h = parseInt(canvas.getAttribute("height"));

    }

    

    Clip.prototype.draw1=function(){

        //碰撞检测

        if (this.pos_x < this.radius) {

            this.delta[0] = Math.random() % 4 + 5;

        } else if (this.pos_x > this.w - this.radius) {

            this.delta[0] = -(Math.random() % 4 + 5);

        }

        if (this.pos_y < this.radius) {

            this.delta[1] = Math.random() % 4 + 5;

        } else if (this.pos_y > this.h - this.radius) {

            this.delta[1] = -(Math.random() % 4 + 5);

        }

        this.pos_x += this.delta[0];

        this.pos_y += this.delta[1];



        this.ctx.clearRect(0, 0, this.w, this.h);

        //保存状态

        this.ctx.save()

        //移动变形

        this.ctx.translate(this.pos_x,this.pos_y);

        //设置裁剪区域

        this.ctx.beginPath();

        this.ctx.arc(0 ,0,this.radius,0,Math.PI*2,true);

        this.ctx.clip();         

        // 将图片画到画布上

        this.ctx.drawImage(this.img, -this.pos_x, -this.pos_y,this.w, this.h);

        //恢复状态

        this.ctx.restore();

    }

    

    Clip.prototype.draw2=function(){

        //碰撞检测

        if (this.pos_x < this.radius) {

            this.delta[0] = Math.random() % 4 + 5;

        } else if (this.pos_x > this.w - this.radius) {

            this.delta[0] = -(Math.random() % 4 + 5);

        }

        if (this.pos_y < this.radius) {

            this.delta[1] = Math.random() % 4 + 5;

        } else if (this.pos_y > this.h - this.radius) {

            this.delta[1] = -(Math.random() % 4 + 5);

        }

        this.pos_x += this.delta[0];

        this.pos_y += this.delta[1];



        this.ctx.clearRect(0, 0, this.w, this.h);

        //绘制灰色的半透明蒙版

        this.ctx.fillStyle="rgba(125,125,125,0.9)"

        this.ctx.fillRect(0, 0, this.w, this.h);

        //保存状态

        this.ctx.save()

        //移动坐标

        this.ctx.translate(this.pos_x,this.pos_y);

        //裁剪透明的圆形区域

        this.ctx.globalCompositeOperation = "xor";   

        this.ctx.fillStyle="white"

        this.ctx.beginPath();

        this.ctx.arc(0 ,0,this.radius,0,Math.PI*2,true);

        this.ctx.fill();       

        // 将图片画到蒙版的下面,即只露出透明区域

        this.ctx.globalCompositeOperation = "destination-over";   

        this.ctx.drawImage(this.img, -this.pos_x, -this.pos_y,this.w, this.h);

        //恢复状态

        this.ctx.restore();

    }



    var cl=new Clip();

    cl.interval=null;

    

    function move(id){      

        if(cl.interval)

            clearInterval(cl.interval)

        if(id==1){

            cl.ctx.clearRect(0, 0, 450, 300);    

            cl.interval=setInterval(function(){cl.draw1()},20);

        }

        else{

            cl.ctx.clearRect(0, 0, 450, 300);    

            cl.interval=setInterval(function(){cl.draw2()},20);

        }

    }



    function stop(){

        clearInterval(cl.interval)

    }

    

    var compositeTypes = [

        &#39;source-over&#39;,&#39;source-in&#39;,&#39;source-out&#39;,&#39;source-atop&#39;,

        &#39;destination-over&#39;,&#39;destination-in&#39;,&#39;destination-out&#39;,&#39;destination-atop&#39;,

        &#39;lighter&#39;,&#39;darker&#39;,&#39;copy&#39;,&#39;xor&#39;

    ];

    function drawComp(){

        for (i=0;i<compositeTypes.length;i++){

            var label = document.createTextNode(compositeTypes[i]);

            document.getElementById(&#39;lab&#39;+i).appendChild(label);

            var ctx = document.getElementById(&#39;tut&#39;+i).getContext(&#39;2d&#39;);



            // draw rectangle

            ctx.fillStyle = "#09f";

            ctx.fillRect(15,15,70,70);



            // set composite property

            ctx.globalCompositeOperation = compositeTypes[i];



            // draw circle

            ctx.fillStyle = "#f30";

            ctx.beginPath();

            ctx.arc(75,75,35,0,Math.PI*2,true);

            ctx.fill();

        }

    }

    drawComp();

</script>
登入後複製

以上是HTML5邊玩邊學(六)-汽車人,變形的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles