<一>CSS部分

@charset "utf-8";

*{

    padding:;

    margin:;

    outline: none;

}

#canvas{

    position: fixed;

    background: white;

    width: 100%;

    height: 100%;

}

<二>HTML部分

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>选择界面</title>

    <link rel="stylesheet" href="css/index.css" />

    <script type="text/javascript" src="js/jQuery.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</head>

<body>

    <canvas id="canvas" width="800" height="600">

        <b>浏览器不支持时显示部分</b>

    </canvas>

</body>

</html>

<三>JS部分

$(function(){

    /*获取绘图界面和绘图环境(800, 600)*/

    var ui = $('#canvas');

    var canvas = ui[0].getContext('2d');

    /*获取图片对象*/

    var img = new Image();

    /*当图片加载完成后才能绘制图片*/

    img.onload = function(){

        var num = 0;

        setInterval(function(){

            num ++;

            num = num == 360 ? 0 : num;

            draw(num);

        }, 100);

    }

    img.src = "image/1.jpg";

    /*绘图方法*/

    function draw(num){

        /*封装canvas操作起始处*/

        canvas.save();

        canvas.clearRect(0, 0, 800, 600);

        /*原点偏移*/

        canvas.translate(250, 250);

        /*旋转 (弧度)*/

        canvas.rotate(num*Math.PI/180);

        /*原点偏移*/

        canvas.translate(-150,-150);

        /*绘制图片*/

        canvas.drawImage(img, 0, 0, 300, 300);

        /*封装canvas操作结束处*/

        canvas.restore();

    }

});

 

 

 

HTML5 Canvas 小例子 旋转的图片的更多相关文章

  1. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  6. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  7. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 将HTML5 Canvas的内容保存为图片

    主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...

  9. html5 canvas防微博旋转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 解决安装vmware-tools出现的“The path "" is not a valid path to the 3.2.0-4-amd64 kernel headers”问题

    在用虚拟机安装使用64位Crunchbang(一种Debian GNU/Linux 的linux)的过程中出现很多小问题.其中vmware-tools安装就是第一个问题. 在使用终端安装vmware- ...

  2. WPF SourceInitialized 事件

    这里先介绍一个窗体的事件SourceInitialized,这个时间发生在WPF窗体的资源初始化完毕,并且可以通过WindowInteropHelper获得该窗体的句柄用来与Win32交互. 具体可以 ...

  3. 关于发现宇宙微波背景（CMB）辐射的一则趣闻

           请看下图:           上图是发现宇宙存在微波背景(CMB)的样子有点怪异的射电望远镜(口径5米,即Holmdel horn antenna天线).该天线具有较好的抗干扰的性能, ...

  4. 详解SID之终结篇

    今天测试某款监控软件时遇到一个比较棘手的问题,这款软件需要在被监控端安装客户端程序.成功在第一个节点安装好客户端后问题出现了,在其他节点安装时报错无法安装.软件报的错误信息无从下手且系统日志也看不出什 ...

  5. FastAdmin 开发第二天：安装环境

    FastAdmin 开发前需要准备好开发环境,我是推荐是使用命令行安装. 运行环境 phpstudy 前期可以使用这类一键包环境,以后自己学着搭建. 后端工具 composer php包管理工具 前端 ...

  6. Angular 4 路由时传递数据

    路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. ...

  7. MySQL 瓶颈及应对措施

    注:内容摘抄自<PHP 核心技术与最佳实践>一书 MySQL 是存在瓶颈的. 当 MySQL 单表数据量达到千万级别以上时,无论如何对 MySQL 进行优化,查询如何简单,MySQL 的性 ...

  8. ORM练习项目-图书管理系统（BMS）实现细节

    分析 一本书 可以由多个作者编著 一本书只能由一个出版社出版 一个作者可以写多本书 每个作者有自己的简介 对应关系: Author-Book # 多对多 Publish-Book # 一对多 Auth ...

  9. webpack创建library及从零开始发布一个npm包

    最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...

  10. RESTful Java client with Apache HttpClient / URL /Jersey client

    JSON example with Jersey + Jackson Jersey client examples RESTful Java client with RESTEasy client f ...