<!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 = 100;

        var y = 100;

        var width = 50;

        var height = 50;

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

        context.scale(2,2);//横，纵

        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>

前面讲过旋转
，也讲过缩放了

这个是2者的结合

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画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  7. Html5 Canvas transform setTransform

    Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...

  8. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  9. 高性能动画！HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

随机推荐

  1. Github pages + Minimal-Mistakes + Disqus建立个人博客记录

    本文详细记录了利用Github pages建立个人博客的步骤. github pages官方推荐使用Jekyll生成静态网页,jekyll支持各种不同的主题,Minimal-Mistakes是一个功能 ...

  2. 《unity 3D 游戏开发 第二版》宣雨松 分享 pdf下载

    链接:https://pan.baidu.com/s/1LfRTGUmaE_lGdcmd6QiZkg 提取码:e2sn

  3. Hadoop 部署文档

    Hadoop 部署文档 1 先决条件 2 下载二进制文件 3 修改配置文件 3.1 core-site.xml 3.2 hdfs-site.xml 3.3 mapred-site.xml 3.4 ya ...

  4. Hexo初体验

    title: Hexo初体验 date: 2018-05-10 tags: Hexo categories: Hexo --- Hexo本地安装 Node.js安装 Hexo npm安装如下 npm ...

  5. Mac OS系统 sublime text3 常用快捷键记录

    个人觉得下面这些个常用的快捷键,还是有必要熟练使用的: 符号说明: ⌘:command ⌃:control ⌥:option ⇧:shift ↩:enter ⌫:delete cmd+n 新建文件(n ...

  6. Final互评------《弹球学成语》---- 杨老师粉丝群

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题;  N(Need,需求):本产品面相青少年及小学生,基于这些用户数量再加上一些休闲玩家,需求量还是比较大的.   A ...

  7. Spring学习总结之面向切面（AOP）

    AOP术语 通知(advice):定义切面是什么以及什么时候使用 连接点(join point):应用在执行过程中能够插入切面的点 切点(pointcut):切点的定义会匹配通知所要织入的一个或多个连 ...

  8. Java实验报告（实验三）

    课程:Java程序设计          班级: 1351 姓名:王玮怡                学号:20135116 成绩:             指导教师:娄嘉鹏       实验日期: ...

  9. 个人项目——wc源程序特征统计

    这一次要做的项目是wc——统计程序文件特征的命令行程序. 根据需求需求得到的模式为:wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需 ...

  10. vue中的minix

    minix 是个什么东西, 就是混合,把你混合给我 浅显表述就是 你说 : ‘我叫李四’, 我说 : ‘我叫张三’, 然后把你 混合给我, 就成了 我说 : ‘我叫张三我叫李四’, 所有解说都在例子里 ...