<!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. Windows 7上安装配置TensorFlow-GPU运算环境

    Windows 7上安装配置TensorFlow-GPU运算环境 1. 概述 在深度学习实践中,对于简单的模型和相对较小的数据集,我们可以使用CPU完成建模过程.例如在MNIST数据集上进行手写数字识 ...

  2. 第二十次ScrumMeeting博客

    第二十次ScrumMeeting博客 本次会议于12月11日(一)22时整在3公寓725房间召开,持续20分钟. 与会人员:刘畅.辛德泰.张安澜.赵奕.方科栋. 1. 每个人的工作(有Issue的内容 ...

  3. UI Recorder 功能详解

    前言: UI Recorder安装教程见:UI Recorder 安装教程(一).UI Recorder 安装教程(二) 本次着重介绍UI Recorder录制过程中的功能按钮:添加悬停,添加断言,使 ...

  4. 认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

    一.Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low.   图标 在写这篇文章之前,我一直以为上图中的 ...

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

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

  6. Linux内核设计与实现 第一章 第二章

    第一章 Linux内核简介 Unix特点: (1)     Unix很简洁,仅仅提供几个几百个系统调用并且有一个非常明确的设计目的 (2)     在Unix中,所有的东西都被当作文件对待,通过一套相 ...

  7. FASIC: A Fast-recovery, Adaptively Spanning In-band Control Plane in Software-Defined Network

    2017 IEEE Global Communications Conference 问题:in-band网络中如果物理链路阻塞或者硬件故障,导致控制器的消息不能及时到达各个交换机导致网络不一致甚至某 ...

  8. python数据分析Titanic_Survived预测

    import pandas as pd import matplotlib.pyplot as plt # matplotlib画图注释中文需要设置from matplotlib.font_manag ...

  9. 八大排序算法的python实现

    # -*- coding: utf-8 -*- # 冒泡排序 def bubble_sort(nums): i = 1 exchanged = True while i < len(nums) ...

  10. 链表的C/C++实现

    一个链表实现,函数声明放在 list.h 头文件汇总,函数定义放在list.cpp 中,main.cpp 用来测试各个函数. 1.文件list.h // list.h #ifndef __LIST_H ...