发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
留言交流
keleyi.htm的代码如下:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>html旋转画布-柯乐义</title> 5 <script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 6 <script type="text/javascript" src="keleyi.js"></script> 7 </head> 8 <body> 9 <canvas id="keleyi"></canvas> 10 </body> 11 </html>
keleyi.js的代码如下:
1 /* 2 * 功能:画布旋转 3 * http:// 4 * 柯乐义 copyright 5 */ 6 (function(){ 7 var canvas=null, 8 context=null, 9 angle=0; 10 function resetCanvas(){ 11 canvas=document.getElementById("ke"+"leyi"); 12 canvas.width=window.innerWidth; 13 canvas.height=window.innerHeight; 14 context=canvas.getContext("2d"); 15 } 16 function animate(){ 17 context.save(); 18 try{ 19 //清除画布 20 context.clearRect(0, 0, canvas.width, canvas.height); 21 //设置原点 22 context.translate(canvas.width * 0.5, canvas.height * 0.5); 23 //旋转角度 24 context.rotate(angle); 25 //设置填充颜色 26 context.fillStyle = "#FF0000"; 27 //绘制矩形 28 context.fillRect(-30, -30, 60, 60); 29 angle += 0.05 * Math.PI; 30 } 31 finally{ 32 context.restore(); 33 } 34 } 35 $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas); 36 $(document).ready(function(){ 37 window.scrollTo(0,1); 38 resetCanvas(); 39 setInterval(animate,40); 40 }); 41 })();
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
jQ应用举例
jQ应用举例<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"> //不同的html文件这句代码不同,因为src路径不同,要修改src路径,把jQuery...
基于three.js的炫酷Canvas 3D线条动画特效
基于three.js的炫酷Canvas 3D线条动画特效简要教程html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。-- Helper...
jQuery 教程
jQuery 教程jQuery 教程。jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。<html><head><script type="text/javascript" src="jquery.js">...
jquery插件懒加载
jquery插件懒加载。DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1&q...
JQGRID 基本用法及示例、换肤等
JQGRID 基本用法及示例、换肤等。<script src="js/jquery.min.js" type="text/javascript"></script>&...
Knockout.js 笔记1
第一阶段复习~HTML5基础夯实
<canvas width=''''''''600'''''''' height=''''...
HTML 5 Canvas
HTML 5 CanvasHTML 5 Canvas.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。向 HTML5 页面添加 canvas 元素。<canvas id="myCanvas" width="200" height="100&q...
jQuery导入及测试
jQuery导入及测试。<script type="text/JavaScript" src="js/jquery-3.1.1.min.js"></script>//将jQuery包引入HTML.<script>jQuery语句</script>//调用jQ...
微信扫码,在手机上查看选中内容