<!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. H5游戏接微信小游戏的支付，满满的都是坑！

    h5小游戏接微信的支付,简直是在为难我胖虎,说多了都是泪. 准备工作: 准备工作一定要做好,不然很容易出错.首先是session_key这个字段,这个session_key是登录的时候需要用到的,根据 ...

  2. 微软职位内部推荐-Senior Software Engineer-DUT

    微软近期Open的职位: Document Understanding and Task (DUT) team in STCA focuses on semantic understanding an ...

  3. python3【基础】-赋值与深浅拷贝

    一.Python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址, ...

  4. Alpha阶段个人贡献分

    根据任务完成情况与之前的评分标准,我们给组员分数如下: 团队成员 最终得分 程刚 49 李睿琦 50 刘丽萍 52 刘宇帆 53 王力民 54 杨昊岚 41 左少辉 51 转会人员: 杨昊岚转到Our ...

  5. 《Linux内核 》MOOC 课程

    姬梦馨 原创微博 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 学习笔记 一:什么是冯诺依曼体系结构? ...

  6. 《当大数据遇见网络：大数据与SDN》

    总体结构: <当大数据遇见网络:大数据与SDN> 摘要 大数据和SDN无论是对于学术界还是工业界来说都极具吸引力.传统上人们都是分别在最前沿工作中研究这两个重要的领域.然而一方面,SDN的 ...

  7. PAT 1064 朋友数

    https://pintia.cn/problem-sets/994805260223102976/problems/994805267416334336 如果两个整数各位数字的和是一样的,则被称为是 ...

  8. C语言入门：05.scanf函数

    一.变量的内存分析 1.字节和地址 为了更好地理解变量在内存中的存储细节,先来认识一下内存中的“字节”和“地址”. (1)内存以“字节为单位”

  9. NAVICAT 12.0.24 连接 MYSQL8.0.12 的方法

    1. 自己本机安装破解的 navicat11 结果连接不上, 所以 升级了下 navicat 12.0.24 破解方法在: https://www.jianshu.com/p/42a33b0dda9c ...

  10. C++ STL 的底层数据结构实现

    C++ STL 的实现:   1.vector      底层数据结构为数组 ,支持快速随机访问   2.list            底层数据结构为双向链表,支持快速增删   3.deque    ...