تعليق: يقدم هذا المقال مثالًا على تأثير دوران القماش الذي يمكن استخدامه JS و HTML5.
كود keleyi.htm كما يلي:
<! doctype html>
<html>
<head>
<title> html canvas canvas </title>
<script type = "text/javaScript" src = "/jQuery -1.10.2.min.js"> </script>
<script type = "text/javaScript" src = "jb51.js"> </script>
</head>
<body>
<Canvas> </tanvas>
</body>
</html>
رمز JB51.JS كما يلي:
/*
* الوظيفة: دوران قماش
*/
(وظيفة(){
var canvas = null ،
السياق = فارغ ،
زاوية = 0 ؛
وظيفة إعادة stetcanvas () {
canvas = document.getElementById ("jb51") ؛
canvas.width = window.innerwidth ؛
canvas.height = window.innerheight ؛
context = canvas.getContext ("2d") ؛
}
دالة animate () {
context.save () ؛
يحاول{
// مسح القماش
context.clearrect (0 ، 0 ، canvas.width ، canvas.height) ؛
// اضبط الأصل
context.translate (canvas.width * 0.5 ، canvas.height * 0.5) ؛
// زاوية الدوران
context.rotate (زاوية) ؛
// تعيين لون التعبئة
context.fillStyle = "#ff0000" ؛
// ارسم المستطيل
context.fillRect (-30 ، -30 ، 60 ، 60) ؛
زاوية += 0.05 * Math.pi ؛
}
أخيراً{
context.restore () ؛
}
}
$ (window) .bind ("desize" ، resetcanvas) .bind ("reorient" ، resetcanvas) ؛
$ (وثيقة). ready (function () {
window.scrollto (0،1) ؛
ResetCanvas () ؛
setInterval (تحريك ، 40) ؛
}) ؛
}) () ؛