<一>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. hdu1224 dp（dp + 栈/父亲数组记录路径）

    题意:给定 n 个城市的有趣度,并给出可以从那些城市飞到那些城市.其中第一个城市即起始城市同样也作为终点城市,有趣度为 0,旅行途中只允许按有趣度从低到高旅行,问旅行的有趣度最大是多少,并输出旅行路径 ...

  2. Microsoft-Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  3. 【spring源码分析】面向切面编程架构设计

    2 注解说明 2.1 @Aspect 作用是把当前类标识为一个切面供容器读取 2.2 @Before标识一个前置增强方法,相当于BeforeAdvice的功能,相似功能的还有 2.3 @AfterRe ...

  4. EF Codefirst方式数据库维护操作

    关于EF codefirst方式数据库维护操作 1.数据实体更新 2.打开pm - 锁定项目:MLearning.Data 3.执行命令 : add-migration [名称] 4.检查无误后,执行 ...

  5. tomcat源码阅读之SingleThreadModel

    一.接口简介: 实现了SingleThreadModel接口的servlet类只能保证在同一时刻,只有一个线程执行该servlet实例的service方法,在tomcat实现中会创建多个servlet ...

  6. RAC8——scan ip的理解

    SCAN概念 先介绍一下什么叫SCAN,SCAN(Single Client Access Name)是Oracle从11g R2开始推出的,客户端可以通过SCAN特性负载均衡地连接到RAC数据库.S ...

  7. let、var、const区别（表格比较）

    let.var.const区别(表格比较): 区别项 let var const 作用域 块级作用域 全局作用域或函数作用域 块级作用域 是否有变量提升 无 有 无 是否可重复声明 不可 可以 不可 ...

  8. JFrame 与 Frame

    JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...

  9. sqlvarchar后自动填充空格解决办法（SET ANSI_PADDING）

    SET ANSI_PADDING http://www.yesky.com/imagesnew/software/tsql/ts_set-set_2uw7.htm http://www.makaido ...

  10. 在VS2010中配置ICE插件的步骤

    ICE为不同的IDE都提供了插件.本文介绍VS2010下的配置. 首先建立一个控制台工程,以此为例,进行介绍. 1.激活插件 选择工具-> IceConfiguration或者在工程右键选择Ic ...