<一>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. LG1419 【寻找段落】

    前言 鉴于这题的题解质量(连LaTeX公式都没有),我决定再发一篇详细的题解,不仅方便大家,还可以作为我学习单调队列优化dp的小结(尽管这题不是dp). 分析 题目要求求一个最大的实数\(x\),使得 ...

  2. sql server 循环操作

    使用的sql 语句如下: declare @userid int ;set @userid=0while(@userid<20)begin print 'the result is :'+STR ...

  3. Drupal 7 建站学习手记（五）：QuickTabs模块内的元素无法溢出的问题

    背景 项目要求站点首页放Views生成的区块,而且要求有很多其它链接. Views生成的区块默认的很多其它链接仅仅能选在列表上方和下方 下图是默认在上方的样式图: 为了美观.我将很多其它链接上移了若干 ...

  4. STL版本号简单介绍

    说明:本文仅供学习交流.转载请标明出处.欢迎转载! 本文的參考文献为:<STL源代码剖析>侯捷        (1)HP STL:全部STL的祖先版本号,由C++之父Alexander S ...

  5. asm数据文件迁移(os–>asm)

    --添加测试表空间 SQL> create tablespace xff datafile '/u01/oradata/xifenfei.dbf' size 10m autoextend on ...

  6. hadoop 安装、命令

    hadoop安装步骤: 安装java 安装hadoop 下载地址:http://apache.claz.org/hadoop/common/ (说明:该网址current文件夹下,是最新版) hado ...

  7. java 多线程之：wait()、notify()、notifyAll()等方法

    wait().notify().notifyAll()等方法介绍: 在Object.java中,定义了wait(), notify()和notifyAll()等接口.wait()的作用是让当前线程进入 ...

  8. Vuejs项目的Webpack2构建优化

    最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...

  9. Scrapy下xpath基本的使用方法

    Scrapy是基于python的开源爬虫框架,使用起来也比较方便.具体的官网档:http://doc.scrapy.org/en/latest/ 之前以为了解python就可以直接爬网站了,原来还要了 ...

  10. Hadoop专业解决方案-第12章 为Hadoop应用构建企业级的安全解决方案

    一.前言: 非常感谢Hadoop专业解决方案群:313702010,兄弟们的大力支持,在此说一声辛苦了,春节期间,项目进度有所延迟,不过元宵节以后大家已经步入正轨, 目前第12章 为Hadoop应用构 ...