<!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. Go语言常用命令介绍

    go build go build 命令主要是用于测试编译.在包的编译过程中,若有必要,会同时编译与之相关联的包. 如果是普通包,当你执行go build命令后,不会产生任何文件. 如果是main包, ...

  2. React JS的基本用法［ES5，纯前端写法］

    1.配置webpack npm install -g webpack #webpack的cli npm install -g webpack-dev-server #webpack自带的服务器 npm ...

  3. Python NaN

    NaN, Not a Number, 非数. 它即不是无穷大, 也不是无穷小, 而是python/numpy/... 觉得无法计算时返回的一个符号(自己的推测, 未考证(TODO)). import ...

  4. 推公式hdu2298

    (0,0)点到(x,y)以v射箭 问 最小的角度 不能射到 -1 x=v*cos(a)*t; y=v*sin(a)*t-0.5*g*t*t; 消去t; y=x*tan(a)-0.5*g*x*x/(v* ...

  5. 一些常用的git指令

    PyCharm编辑器 如何切换分支 git branch 查看当前在哪个分支,也会显示本地所有的分支名 git branch dev-chenqiao 新建分支 git checkout dev-ch ...

  6. Java的修饰符

    转自:http://blog.csdn.net/manyizilin/article/details/51926230#L42 修饰符: 像其他语言一样,Java可以使用修饰符来修饰类中方法和属性.主 ...

  7. Podfile使用说明

    什么是Podfile ? CocoaPods是用ruby实现的,因此Podfile文件的语法就是ruby的语法.podfile是一个说明文件,用以描述管理一个或者多个Xcode project的tar ...

  8. 仿QQ大战—界面篇

    之前在<仿QQ大战-服务器的搭建(ServerSocket)>中实现了服务器的搭建,以及一个简单地传递数据的实现,现在就是来实现类似与QQ聊天通信的功能.首先是界面的实现: 首先:服务器和 ...

  9. [日常训练]string

    Description 给定一个长度为$n$的字符串,串中的字符保证是前$k$个小写字母.你可以在字符串后再添加$m$个字符,使得新字符串所包含的不同的子序列数量尽量多.当然,前提是只能添加前$k$个 ...

  10. How to build a NFS Service

    NFS网络文件系统的服务的配置 1 Preparation Three Linux virtual machines one: to be NFS Service the other two: NFS ...