<!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. 抱歉！15:44-16:39阿里云RDS故障造成全站不能正常访问

    非常非常抱歉!2016年3月7日15:44-16:39,由于阿里云RDS(云数据库)故障,造成全站不能正常访问,给您带来了很大很大的麻烦,恳请您的谅解! 故障是在15:44开始出现的,应用日志中出现大 ...

  2. ICP算法（Iterative Closest Point迭代最近点算法）

    标签: 图像匹配ICP算法机器视觉 2015-12-01 21:09 2217人阅读 评论(0) 收藏 举报 分类: Computer Vision(27) 版权声明:本文为博主原创文章,未经博主允许 ...

  3. 5G关键技术评述

    业内重大事件: 张  平:无线通信领域专家,北京邮电大学教授,博士生导师,现任北京邮电大学无线新技术研究所(WTI)所长.泛网无线通信教育部重点实验室主任以及中德软件研究所副所长.张平教授是国家宽带无 ...

  4. HTTP相关函数

    1.headers_list() //返回头部信息 2.header("Content-type: text/html; charset=utf-8") //修改编码 3.head ...

  5. DataTable ajax分页+删除+查询+修改

    这个框架前前后后跳进了很多次坑,也算是本人比较愚笨吧做了很长的时间而积累的经验... dataTable用了很久,今天在此总结一下使用方法以及常用属性的解释. Html代码 : <div cla ...

  6. ActiveMQ_Mqtt的TCP丢包

    现象 Mqtt Consumer应该收到的消息少于预期,登录ActiveMQ的管理页面里的Topics,查看Messages Enqueued发现同样少于理应接收的数量. 定位问题 怀疑是TCP丢包, ...

  7. JavaScript系列文章：不能不看的数据类型检测

    由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...

  8. zookeeper原理解析-序列化

    1)底层通信数据封装与操作           BinaryInputArchive& BinaryOutputArchive底层通信数据封装与操作     BinaryInputArchiv ...

  9. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  10. sql server中对xml进行操作

    一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...