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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>多个图像围绕中心点旋转</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        context.setTransform(1,0,0,1,0,0);

        var angleInRadians = 45 * Math.PI / 180;

        var x = 50;

        var y = 100;

        var width = 40;

        var height = 40;

        context.translate(x+.5*width,y+.5*height);

        context.rotate(angleInRadians);

        context.fillStyle="red";

        context.fillRect(-.5*width,-.5*height,width,height);

        context.setTransform(1,0,0,1,0,0);

        var angleInRadians = 75 * Math.PI / 180;

        var x = 100;

        var y = 100;

        var width = 40;

        var height = 40;

        context.translate(x+.5*width,y+.5*height);

        context.rotate(angleInRadians);

        context.fillStyle="red";

        context.fillRect(-.5*width,-.5*height,width,height);

        context.setTransform(1,0,0,1,0,0);

        var angleInRadians = 90 * Math.PI / 180;

        var x = 150;

        var y = 100;

        var width = 40;

        var height = 40;

        context.translate(x+.5*width,y+.5*height);

        context.rotate(angleInRadians);

        context.fillStyle="red";

        context.fillRect(-.5*width,-.5*height,width,height);

        context.setTransform(1,0,0,1,0,0);

        var angleInRadians = 120 * Math.PI / 180;

        var x = 200;

        var y = 100;

        var width = 40;

        var height = 40;

        context.translate(x+.5*width,y+.5*height);

        context.rotate(angleInRadians);

        context.fillStyle="red";

        context.fillRect(-.5*width,-.5*height,width,height);

    }

}

</script>

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

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

html5 canvas多个图像旋转的更多相关文章

  1. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

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

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

  4. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

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

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

  6. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. html5 canvas旋转

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

  8. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  9. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

随机推荐

  1. Docker部署Registry私有镜像库

    拉取镜像 docker pull registry:2.6.2   生成账号密码文件,这里采用htpasswd方式认证 docker run --rm --entrypoint htpasswd re ...

  2. LeetCode 504. Base 7 (C++)

    题目: Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "2 ...

  3. 使用Visual Studio 2013进行单元测试

    使用Visual Studio 2013进行单元测试 1.打开VS2013 --> 新建一个项目.这里我们默认创建一个控制台项目.取名为UnitTestDemo 2.在解决方案里面新增一个单元测 ...

  4. Linux基础三(软件安装管理)

    目录: 一.Linux 中软件包的分类 1.源码包 2.二进制包 3.源码包 4.软件安装的选择 二.软件安装之 RPM 1.背景知识 2.准备知识 3.安装升级与卸载 4.查询校验与提取 三.软件安 ...

  5. Software-Defined Networking:A Comprehensive Survey--Day3

    (接Day2的内容 +2s) E. Layer V: Northbound Interfaces 南行接口已经得到广泛接受(OpenFlow),但现在就定义北向接口还为时尚早,开发不同的控制器经验一定 ...

  6. ecshop ueditor实现百度编辑器

    ecshop后台编辑器替换成ueditor编辑器 投稿:hebedich 字体:[增加 减小] 类型:转载   这篇文章主要介绍了ecshop后台编辑器替换成ueditor编辑器的详细过程,这里推荐给 ...

  7. 深入理解es6的promise

    一.promise入门 1. Promise对象是什么 回调函数的另一种原生实现,比之前回调函数的写法机构清晰,功能强大, 2.以前回调这么写 function a(fn){ let h = 1; s ...

  8. 服务端增加WCF服务全局异常处理机制

    服务端增加WCF服务全局异常处理机制,任一WCF服务或接口方式出现异常,将统一调用WCF_ExceptionHandler.ProvideFault方法,因此不需要每个方法使用try catch写法. ...

  9. obj.getClass() == Person.class 用于判断类型

    obj.getClass() == Person.class  用于判断类型

  10. [代码]--db2中left()函数和right()函数对应oracle中的substr()函数

     DB2 LEFT.RIGHT函数 语法:LEFT(ARG,LENGTH).RIGHT(ARG,LENGTH) LEFT.RIGHT函数返回ARG最左边.右边的LENGTH个字符串,ARG可以是CHA ...