<!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. python3面向对象注意事项

    一.面向对象super的作用: class parent(object): def __init__(self): self.test() def test(self): print('parent- ...

  2. 关于最近996.icu的一点感想

    最近这个996.ICU的话题讨论的火热,特别是一些业界大佬有直言不讳的说就是要996,有的弄些鸡汤文把996说成年轻人就该这样的.作为一个普通的码农,实在是看不下去了,在这里说些自己的看法,希望年轻人 ...

  3. Apache Ignite 学习笔记(一): Ignite介绍、部署安装和REST/SQL客户端使用

    Apache Ignite 介绍 Ignite是什么呢?先引用一段官网关于Ignite的描述: Ignite is memory-centric distributed database, cachi ...

  4. ajax请求超时判断(转载)

    ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...

  5. 剑指offer：合并两个排序的链表

    题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 解题思路: 这道题应该考察也是链表的相关操作.具体实现,新建一个新的链表,用两个指针分别指向两 ...

  6. C与C++的编程风格区别

    c和c++都是在实践中发展起来的语言.实用性极强.c是与UNIX/Linux的发展相辅相成的.而C++是B.S为了摆脱c与硬件以及底层过于紧密的苦恼,而开发的语言.C++可以说就是c语言的超集.任何c ...

  7. 20172319 《Java程序设计教程》第7周学习总结

    20172319 2018.04.11-16 <Java程序设计教程>第7周学习总结 目录 教材学习内容总结 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题 ...

  8. json-server（copy）

    https://blog.csdn.net/wangle_style/article/details/79455508(原文章地址) 新版vue-cli如何使用json-server来mork 原创  ...

  9. 08.基于IDEA+Spring+Maven搭建测试项目--Maven的配置文件settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  10. Day25-JSONP跨域请求

    1.  json 是一种数据格式, jsonp 是一种数据调用的方式.你可以简单的理解为 带callback的json就是jsonp. 2. Python里面有个模块requests, request ...