1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>html5 canvas旋转</title>
  6. <script src="js/modernizr.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <script type="text/javascript">
  11. window.addEventListener('load',eventWindowLoaded,false);
  12. function eventWindowLoaded(){
  13. 	canvasApp();
  14. }
  15. function canvasSupport(){
  16. 	return Modernizr.canvas;
  17. }
  18. function canvasApp(){
  19. 	if(!canvasSupport()){
  20. 		return;
  21. 	}else{
  22. 		var theCanvas = document.getElementById('canvas')
  23. 		var context = theCanvas.getContext("2d")
  24.  
  25. 	}
  26. 	drawScreen();
  27.     function drawScreen(){
  28. 		context.fillStyle="black";
  29. 		context.fillRect(100,100,50,50);
  30.  
  31. 		context.setTransform(1,0,0,1,0,0);
  32. 		var angleInRadians = 45 * Math.PI / 180;
  33. 		context.rotate(angleInRadians);
  34. 		context.fillStyle="red";
  35. 		context.fillRect(150,100,50,50);
  36.  
  37.     }
  38.  
  39. }
  40.  
  41. </script>
  42. <canvas id="canvas" width="500" height="500">
  43. 你的浏览器无法使用canvas
  44. 小白童鞋；你的支持是我最大的快乐！！
  45. </canvas>
  46. </body>
  47. </html>

context.setTransform(a,b,c,d,e,f);

a 水平旋转绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图 
  1. var angleInRadians = 45 * Math.PI / 180;
  2. context.rotate(angleInRadians);
    设置函数，调用函数

html5 canvas旋转的更多相关文章

  1. html5 canvas旋转+缩放

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

  2. html5 canvas 旋转扩大

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

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

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

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  8. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  9. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. Go语言实现数据结构（一）单链表

    1.基本释义 2.结构体设计 3.基本方法设计 4.Main函数测试 1. 基本释义 线性表包含两种存储方法:顺序存储结构和链式存储结构,其中顺序表的缺点是不便插入与删除数据:接下来我们重点实现基于G ...

  2. App云测试服务对比

    前言: 我们都知道在测试移动app时最耗时的是在各种测试设备进行测试, 因为不论是安卓还是iOS都已经碎片化了.而云测试看似是解决这一问题的有效途径.因此选择哪种云测试平台来协助测试人员进行各种测试就 ...

  3. PAT甲题题解-1054. The Dominant Color (20)-排序/map

    原本用map,发现超时了,后来便先用数组存储排个序,最后for一遍统计每种颜色出现的次数(每种颜色的首位索引相减+1),找出最多的即可. #include <iostream> #incl ...

  4. 在CentOS上搭建PHP服务器环境(可用)

    原文:https://www.cnblogs.com/zy2009/p/7047828.html 1,先安装apache: yum install httpd 配置ServerName vi /etc ...

  5. Linux读书笔记第五章

    主要内容: 什么是系统调用 Linux上的系统调用实现原理 一个简单的系统调用的实现 1. 什么是系统调用 简单来说,系统调用就是用户程序和硬件设备之间的桥梁. 用户程序在需要的时候,通过系统调用来使 ...

  6. C语言和go语言之间的交互 - C语言中使用go语言，使用的go语言又使用了c语言

    一.go语言中使用C语言 go代码中使用C代码,在go语言的函数块中,以注释的方式写入C代码,然后紧跟import “C” 即可在go代码中使用C函数 代码示例: go代码:testC.go 1 pa ...

  7. Beta阶段冲刺四

    Beta阶段冲刺四 Task1:团队TSP 团队任务 预估时间 实际时间 完成日期 新增其他学院的爬虫 180 130 11.30 新增其他学院的数据库字段修改 180 160 12.1 新增其他学院 ...

  8. 第八周PSP（11.5--11.9)

    2016.11.5 2016.11.6 2016.11.7 2016.11.8 2016.11.9

  9. [问题排查]记录一次两个dubbo提供者同时在线，代码不一致导致问题的排查记录

    1. 需求 有一个需求job定时5秒一次,job[消费者]调用dsc[提供者]提供的dubbo完成:先清空redis的某个key,然后再往redis中放入新的数据,这是一个定时任务,需要每隔5秒执行一 ...

  10. mysql 列转行处理

    CREATE TABLE `table1` ( `id` ) DEFAULT NULL, `name` ) CHARACTER SET utf8 DEFAULT NULL ) ENGINE=MyISA ...