ความคิดเห็น: บทความนี้แนะนำตัวอย่างของเอฟเฟกต์การหมุนของผืนผ้าใบที่ JS และ HTML5 สามารถใช้งานได้
รหัสของ keleyi.htm มีดังนี้:
<! doctype html>
<html>
<head>
<title> HTML หมุนผืนผ้าใบ </title>
<script type = "text/javascript" src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javascript" src = "jb51.js"> </script>
</head>
<body>
<Canvas> </sanvas>
</body>
</html>
รหัสของ JB51.js มีดังนี้:
-
* ฟังก์ชั่น: การหมุนของผ้าใบ
-
(การทำงาน(){
var canvas = null
บริบท = null
มุม = 0;
ฟังก์ชั่น ResetCanvas () {
canvas = document.getElementById ("JB51");
canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
บริบท = canvas.getContext ("2d");
-
ฟังก์ชั่น animate () {
บริบท save ();
พยายาม{
// ล้างผ้าใบ
context.clearRect (0, 0, Canvas.width, Canvas.height);
// ตั้งค่าที่มา
บริบทการแปล (Canvas.Width * 0.5, Canvas.Height * 0.5);
// มุมหมุน
บริบทการค้าขาย (มุม);
// ตั้งค่าสีเติม
Context.FillStyle = "#FF0000";
// วาดสี่เหลี่ยมผืนผ้า
Context.fillrect (-30, -30, 60, 60);
มุม += 0.05 * math.pi;
-
ในที่สุด{
บริบท restore ();
-
-
$ (หน้าต่าง). -bind ("ปรับขนาด", รีเซ็ตคานวาส). -bind ("reorient", รีเซ็ตคานวาส);
$ (เอกสาร) .ready (function () {
window.scrollto (0,1);
RESETCANVAS ();
setInterval (animate, 40);
-
-