<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

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

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

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

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    var canvas = oc.getContext('2d');

    /*偏移*/

    canvas.translate(200, 200);

    var num = 0, multiple = 1, value = 1;

    setInterval(function(){

        num++;

        if(multiple == 100 || multiple == 0){

            value *= -1;

        }

        multiple += value;

        /*局面canvas的起始点*/

         canvas.save();

         /*图形倍数(横向放大倍数,纵向放大倍数)*/

         canvas.scale(multiple*1/50, multiple*1/50);

         /*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/

        canvas.clearRect(-150, -150, oc.width, oc.height);

        /*旋转弧度*/

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

        /*偏移旋转中心*/

        canvas.translate(-50, -50);

        /*填充方块*/

        canvas.fillRect(0, 0, 100, 100);

        /*局面canvas的结束点*/

        canvas.restore();

    }, 30);

</script>

HTML5 Canvas 小例子 伸缩旋转方块的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  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小游戏基础：用户交互

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

  6. html5 canvas多个图像旋转

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

  7. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

  8. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. 在linux下使用am335x的DMA

    [本文首发于cnblogs,作者:byeyear,Email:east3@163.com] 这几天在弄am3358的DMA,简化应用环境如下: am3358的FSMC接了一片FPGA: FPGA上接A ...

  2. C++11--正则表达式<regex>

    /* 正则表达式:一个指定的模式用来对文本中的字符串提供精确且灵活的匹配 */ #include <regex> using namespace std; int main() { str ...

  3. Dubbo(6)Dubbo服务集群实现负载均衡

    什么时候用到集群?比如说某个服务,并发量特别大的时候就会用到集群: 具体的话比如说,某些特殊的项目一天的注册量10万,国家的一些考试系统,集中在几天,注册量一天10万,如果只弄一个服务,根本服务不过来 ...

  4. java设计模式-工厂系列

    一.简单工厂 1.背景: 任意定制交通工具的类型和生产过程 代码: Moveable.java package com.cy.dp.factory; public interface Moveable ...

  5. java设计模式-Iterator

    Iterator模式 主要是用在容器的遍历上,其他的地方都不怎么用:理解一下,会用了就可以了:   1.背景 请动手自己写一个可以动态添加对象的容器: 代码: ArrayList.java(是自己实现 ...

  6. HDOJ 2019 数列有序!

    #include<vector> #include<iostream> #include<algorithm> #include<cstdio> usi ...

  7. [UE4]时间轴线TimeLine，Lerp插值

    一.TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点. 二.Lerp插值 Lerp插值一般与 ...

  8. [UE4]响应鼠标点击

  9. 可变卷积Deforable ConvNet 迁移训练自己的数据集 MXNet框架 GPU版

    [引言] 最近在用可变卷积的rfcn 模型迁移训练自己的数据集, MSRA官方使用的MXNet框架 环境搭建及配置:http://www.cnblogs.com/andre-ma/p/8867031. ...

  10. webpack 配置案例for angular babel

    1.dev.js: const webpack = require('webpack'); const webpackUglifyJsPlugin = require('webpack-uglify- ...