<一>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. C4D 计算体积和表面积插件

    前段时间,由于有个模型要做3D打印,所以需要知道模型的体积以及表面积,以便计算价格. 我用的是C4D,恕我愚昧,在C4D上没找到自带的. 在网上找了好久,才找到一个由法国开发名为aire_volume ...

  2. WC游记

    第一次来WC,感觉这种集训真吼啊 day0 火车上快速补习了莫队,和AC自动姬,AC自动姬以前就会写只不过太久没写忘了我会了= = 莫队只是学习了做法,还没有做过题…… 本来想再复习一下后缀数组,然后 ...

  3. CSI-MIPI学习笔记

    一.mipi LCD 的CLK时钟频率与显示分辨率及帧率的关系 公式: Mipiclock = [ (width+hsync+hfp+hbp) x (height+vsync+vfp+vbp) ] x ...

  4. 一个方便查看数据库转换rest/graphql api 的开源软件的github 项目

    https://github.com/dbohdan/automatic-api 是一个不错的github 知识项目,帮助我们 列出了,常见的的数据库可以直接转换为rest/graphql api 的 ...

  5. Oracle 多行合并一行 方法

    假如有如下表,其中各个i值对应的行数是不定的 SQL> select * from t; I A          D ---------- ---------- --------------- ...

  6. linQ to sql 查询生成的sql语句

    1.  如果是控制台应用,直接 db.Log = Console.Out; 2.其他应用则用如下语句: StringBuilder sql = new StringBuilder(); db.Log ...

  7. Angular 4 表单

    一. 模板表单 1. 如下图 2. code 3. 效果图 二.响应式表单 1. 增加ReactiveFormsModule 2.响应式表单用到的类和指令 3. 控制器代码 4. html <! ...

  8. 【shell】正则表达式语法

    一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串 ...

  9. ipconfig出现window IP configuration 。。

    我的电脑  右击 -->属性 ---->硬件---->设备管理器 安装以太网网卡 1.自动  电脑重新开机会自动提示安装 2.手动  下载以太网网卡驱动 ,选中合适类型(一般为int ...

  10. 关于IOS给我的启发

    用了将近一年半的iOS,从4到4S,iOS5到iOS6.这里谈谈自己对iOS的一些看法,以及这款移动操作系统给我的启发.我知道这个帖子发出来可能有点“危险”.我从不发水贴,这些积分都是大家给的,不是灌 ...