<一>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. 使用webpack搭建vue项目中遇到的问题

    1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...

  2. OpenXml操作Word的一些操作总结．无word组件生成word.（转）

    http://www.cnblogs.com/zhouxin/p/3174936.html OpenXml相对于用MS提供的COM组件来生成WORD,有如下优势: 1.相对于MS 的COM组件,因为版 ...

  3. bzoj 3528 [ZJOI2014] 星系调查 题解

    [原题] 星系调查 [问题描写叙述] 银河历59451年.在银河系有许很多多已被人类殖民的星系.如果想要在行 星系间往来,大家一般使用连接两个行星系的跳跃星门.  一个跳跃星门能够把 物质在它所连接的 ...

  4. 使用过的bug跟踪系统

    MantisBT jira

  5. vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能

    先上一张效果图,然后再上代码(由于只做效果,未做数据相关的处理:实际处理数据时不修改 dom 元素,只是利用 dom 元素传递数据,然后需改数据,靠数据驱动效果) <div :id=" ...

  6. C#代码规范和质量检查工具

    代码风格检查:StyleCop The StyleCop tool provides warnings that indicate style and consistency rule violati ...

  7. 无需公众号PHP微信登录微信授权微信第三方登录微信开发php开发

    无论是个人还是公司,无需申请公众号,无需申请微信开放平台,即可实现手机网站和PC网站的微 信登录!!! 正常的微信登录是这样的: 1.手机版网站做微信登录,需要申请一个认证公众号,认证不仅需要公司营 ...

  8. Spring和Quartz集成

    本文转载自:http://blog.csdn.net/u010648555/article/details/54891264 Spring是一个很优秀的框架,它无缝的集成了Quartz,简单方便的让企 ...

  9. 【EasyUI学习-1】MyEclipse+easyui学习官方Demo

    介绍 easyui的介绍,网上很多,这里就不进行介绍了. easyUI获取 官网: http://www.jeasyui.com/  下载地址:http://www.jeasyui.com/downl ...

  10. bzoj1830 Y形项链

    Description 小可可得到了一个可爱的Y型项链.小可可现在的项链是这个样子的:项链的最中间有一颗大珍珠作为结合点,从大珍珠上连出来3条由各种宝石串起来的链子.小可可希望让这3个链子完全一样,她 ...