<!DOCTYPE htmls>

<html>

<head>

    <title></title>

    <style>

    </style>

</head>

<body>

    <div class="mid">

        <canvas width="600" height="400" style="background:pink"  id="canvas">

            您的浏览器当前版本不支持canvas标签

        </canvas>

    </div>

</body>

</html>

<script>

    //获取画布DOM  还不可以操作

    var canvas=document.getElementById('canvas');

    //alert(canvas);

    //设置绘图环境

    var cxt=canvas.getContext('2d');

    cxt.beginPath();

    var img = new Image();

    img.src = "./pics/psb.jpg";

    cxt.drawImage(img, 100, 100, 240, 169);

    cxt.save();

    //在异次元空间重置0,0点的位置

    cxt.translate(100,100);

    //图片/形状旋转

    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180

    cxt.rotate(-30*Math.PI/180);

    var img = new Image();

    img.src = "./pics/psb.jpg";

    cxt.drawImage(img, 0, 0 , 240, 169);

    cxt.restore();

</script>

canves 图片旋转 demo的更多相关文章

  1. jQuery图片旋转展示收缩效果

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

  2. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  3. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

  4. 强大！HTML5 3D美女图片旋转实现教程

    又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...

  5. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  6. PHPThumb处理图片，生成缩略图，图片尺寸调整，图片截取，图片加水印，图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

  7. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

  8. js无刷新上传图片，服务端有生成缩略图，剪切图片，iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

  9. iOS_UIImage_图片旋转

    一.目的: 有时候我们获得到的图片我们不是我们想要的方向,需要对图片进行旋转.比如:图片旋转90度180度等. 二.实现过程. 1.获取到该UIImage. 2.开启上下文. 3.上下文的具体操作. ...

随机推荐

  1. Debian 安装记录

    1.蓝色标注是安装的部分或配置的.  作者:http://www.cppblog.com/jinglexy上海体育馆   2.linux 发行版测评网站:www.distrowatch.com   打 ...

  2. java什么时候声明static方法

    1.经常用到的方法,可以声明为static,这样省去了每次new对象的内存空间,因为非static方法,需要new对象才能调用此方法.但因此也产生多线程访问线程安全问题 比如: 2.当一个方法或者变量 ...

  3. Android开发，布局xml文件命名注意事项——不能包含任何大写字母

    转自:http://blog.sina.com.cn/s/blog_628b45090100zuit.html 在开发Android应用时,会接触到布局文件,一般在 工程名/res/layout/*. ...

  4. web.xml加载顺序 [转载]

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  5. 把Java数组转换为List时的注意事项

    本文由 ImportNew - 飘扬叶 翻译自 mlangc.欢迎加入翻译小组.转载请见文末要求. 不幸的是并不是每件事都尽如人意.举个例子,现在将一个Java数组转换为List.当然,我们可以使用A ...

  6. Python学习（七）面向对象 ——类和实例

    Python 面向对象 —— 类和实例 类 虽然 Python 是解释性语言,但是它是面向对象的,能够进行对象编程.至于何为面向对象,在此就不详说了.面向对象程序设计本身就很值得深入学习,如要了解,请 ...

  7. TYVJ 2002 扑克牌 题解

    P2002 扑克牌 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 Admin生日那天,Rainbow来找Admin玩扑克牌……玩着玩着Rainbow觉得太没 ...

  8. vnstat 查看服务器带宽统计命令

    vnStat是一个Linux下的网络流量监控软件,它记录指定网卡每日的传输流量日志. 它并非基于网络包的过滤,而是分析文件系统- /proc, 所以vnStat无需root的权限就可使用. ,它还自带 ...

  9. （转载）uCOS-II的嵌入式串口通信模块设计

    在嵌入式应用中,使用RTOS的主要原因是为了提高系统的可靠性,其次是提高开发效率.缩短开发周期.uCOS-II是一个占先式实时多任务内核,使用对象是嵌入式系统,对源代码适当裁减,很容易移植到8~32位 ...

  10. 【SSH 基础】SSH框架--struts深入具体解释（一）

    学习了struts,可是对于它的由来,以及为什么使用action和struts.xml的方式而不採用曾经的servlet方式.有些疑问,究竟之前的方式有什么弊端,struts又给我们带来了什么便利? ...