<!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. npm install的几种命令形式区别

    转自未来与传说.jigetage 我们在使用 npm install 安装模块的时候 ,一般会使用下面这几种命令形式: npm install moduleName # 安装模块到项目目录下 npm ...

  2. [dx11]利用SpriteFont绘制中文--本地化文本

    1.下载DirectX11 Tool Kit SDK,解压后编译,生成DirectXTK.lib库文件和MakeSpriteFont应用工具; 2.在Dx11环境基础上,用生成的库文件搭建XTK环境; ...

  3. Unity2D 面向目标方向

    在2d空间上,假设角色的自身的y轴方向为正方向,如果要让角色随时面向一个目标点. 这里假设(0,0)点为目标点 第一种: Vector3 v = Vector3.zero - transform.po ...

  4. App Inspector 功能详解

    前言: App Inspector:浏览器端的移动设备 UI 查看器,使用树状态结构查看 UI 布局,自动生成 XPaths 官网:https://macacajs.github.io/app-ins ...

  5. CentOS 7 Apache服务的安装与配置

    原文出处:http://blog.51cto.com/13525470/2070375 一.Apache简介 Apache 是一个知名的开源Web服务器.早期的Apache服务器由Apache Gro ...

  6. PAT甲题题解-1019. General Palindromic Number (20)-又是水题一枚

    n转化为b进制的格式,问你该格式是否为回文数字(即正着写和倒着写一样)输出Yes或者No并且输出该格式又是水题... #include <iostream> #include <cs ...

  7. Scrum Meeting NO.2

    Scrum Meeting No.2 1.会议内容 今天,我们对已经确定的任务进行了分配,并针对界面设计方面的细节进行讨论. 由于这周其它课程任务繁重(编译+数据库).前端的任务主要分配给编程能力较好 ...

  8. Linux内核实验作业七

    实验作业:Linux内核如何装载和启动一个可执行程序 20135313吴子怡.北京电子科技学院 [第一部分]理解编译链接的过程和ELF可执行文件格式 1.编译链接的过程 2.ELF可执行文件格式 一个 ...

  9. Python3的bytes和str之别

    Python3不会以任意隐式的方式混用str和bytes,正是这使得:两者的区分特别清晰,在使用Python时不能拼接字符串和字节包,也无法搜索字节包里面的字符串(反之亦然),也不能讲字符串传入参数为 ...

  10. 侧边导航栏css示例

    效果展示: html: <div class="sidebar"> <ul> <li>优先级 <ul> <li>< ...