首頁

web前端

H5教程

HTML5高階程式設計之圖形扭曲及其應用一(原理篇)

黄舟

Mar 02, 2017 pm 01:34 PM

HTML5中的幾種變形

HTML5中的變形，共有以下幾種方法

scale() 縮放
rotate() 旋轉
translate() 平移
transform() 矩陣變形
setTransform() 重設矩陣

##這幾個方法，對圖片共能完成下面幾種處理

但是，如果要實現下面這種不規則的變形，就不行了

#那咱們一步步，先來看HTML5的這幾個方法。

1，縮放方法如下

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.scale(0.5,0.5);
	ctx.drawImage(img,500,0);
};
</script>
</body>
</html>

效果

#2，旋轉程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.rotate(20*Math.PI/180);
	ctx.drawImage(img,200,0);
};
</script>
</body>
</html>

效果

#3，平移程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.translate(100,100);
	ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

效果

4，傾斜程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.setTransform(1.3,0.1,-0.2,1,80,40);
	ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

效果

#不規則變形

前提到，HTML5沒辦法直接實現不規則變形，但是，可以透過一連串組合來實現不規則變形，例如將下面的這個變形做一下分解

分解後變成

那繼續看，它其實可以看做是兩個變形的組合，如下圖

其實就是將多個變形組合到了一起，這樣講幾個變形的其中的一部分拿出來，再拼湊成新的圖形，就變成了剛才的特殊圖形了

順著這個思路，我彷照AS3，將一張圖分解成多個小的三角形，效果如下

就這樣，很輕鬆的實現了drawtriangles函數，用來扭曲圖形，它與AS3的drawtriangles函數功能基本一致，區別就是，第4個之後的參數的含義不同，在這裡它第4個參數表示分割線的線粗，第5個參數則表示分割線的顏色，如果不設定，則不顯示分割線，這個函數效果如下，你可以實現任何變形，甚至3D變形也可以

這面是測試連接，你可以拖曳圖中的紅點，來讓圖片發生任意的扭曲變形

http://lufy.netne.net/lufylegend-js/lufylegend-1.4 /beginBitmapFill/sample01.html

使用這個drawtriangles函數，你需要下載HTML5開源引擎lufylegend的1.5版或以上版本，lufylegend1.5版發佈地址如下

http://blog. csdn.net/lufy_legend/article/details/8054658

以上是HTML5高階程式設計圖形扭曲及其應用一(原理篇)的內容，更多相關內容請關注PHP中文網（www.php. cn）！

陳述

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

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。