<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        /*按原有坐标偏移*/

        oGC.translate(200,100);

        /*旋转45度 以坐标顶点*/

        oGC.rotate(45*Math.PI/180);

        /*按照比例放大缩小*/

        oGC.scale(1,1);

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

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

http://www.5227788.cn/static/Change.html

简单动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        var num=0;

        var num2 = 0;

        var value = 1;

        setInterval(function(){

            num++;

            /*函数的封装*/

            oGC.save();

            /*清楚画布*/

            oGC.clearRect(0,0,oC.width,oC.height);

              /*按原有坐标偏移*/

             oGC.translate(100,100);

        if(num2 == 100){

            value = -1;

        }

        else if(num2 == 0){

            value = 1;

        }

        num2 += value;

        oGC.fillStyle='red';

            /*每次换50/1*/

            oGC.scale( num2*1/50,num2*1/50 );

            /*每次旋转的角度*/

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

            /*偏移为中心*/

            oGC.translate(-50,-50);

            /*实心正方形*/

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

            /*储存路径*/

            oGC.restore();

        },30)

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

html5 canvas-变幻函数的更多相关文章

  1. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  2. HTML5 Canvas arc()函数

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  6. 用html5 canvas和JS写个数独游戏

    为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...

  7. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  8. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  9. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  10. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

随机推荐

  1. 服务端跨域处理 Cors

    1  添加 System.Web.Cors,System.Web.Http.Cors 2 global文件中 注册asp.net 管道事件 protected void Application_Beg ...

  2. [转] JAVA读取excel数据（插入oracle数据库）

    原文地址:http://blog.csdn.net/zczzsq/article/details/16803349 本实例做的是读取execl(只能读取.xls的execl,即只能读取03版的),如果 ...

  3. Quartz定时任务

    spring多个定时任务quartz配置 例子1: biz-quartz-context.xml配置 <?xml version="1.0" encoding="U ...

  4. 一次xbuild编译失败的排查

    今天一个待上线服务测试完毕,需要构建CI,按照模板配置好包还原,xbuild编译,报错,错误信息如下: EtcdRegister.cs(8,15): error CS0234: The type or ...

  5. table里面，怎么根据checkbox选择的一行中的某个单元格的值是否为空，来判断是否该选中

    <table class="stripe" id="tab2"> <tr> <th>选择</th> <th ...

  6. django 基础篇

    jdango 简介: 一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django,使你能够以 小的代价构建和维护高质量的Web应用. Python的WEB框架有Django.Tornad ...

  7. Java多线程与并发库高级应用-面试题

    第一题:现有的程序代码模拟产生了16个日志对象,并且需要运行16秒才能打印完这些日志,请在程序中增加4个线程去调用parseLog()方法来分头打印这16个日志对象,程序只需要运行4秒即可打印完这些日 ...

  8. [UWP] 对应用进行A/B测试

    [对A/B测试的看法] 开发者在Dev Center中设置几种应用变体,这几种变体有几个变量的值不一样,比如有变体A和变体B(当然还可以加上变体C,Dev Center最多支持5个变体),A和B的不同 ...

  9. Nginx配置性能优化

    大多数的Nginx安装指南告诉你如下基础知识--通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了.而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...

  10. 使用Xmanager访问CentOS远程桌面

    最近在搞Qemu虚拟机相关的项目,需要用到Linux的桌面系统,用Xmanager连接CentOS桌面最方便了. Linux端:CentOS release 6.8 (Final) Windows端: ...