<!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. 如何在SpringBoot当中上传多个图片或者上传单个图片 工具类

    如何在SpringBoot当中上传多个图片[上传多个图片 ] 附赠工具类 1.SpringBoot 上传图片工具类 public class SpringUploadUtil { /*** * 上传图 ...

  2. Redis-环境搭建、创建服务、搭建主从复制-Windows版本

    一.搭建Redis环境 1.链接:http://pan.baidu.com/s/1boKAzzL 密码:sh2r 2.不赘述:执行redis-server.再执行redis-cli即可.redis环境 ...

  3. HDU 4611 Balls Rearrangement（2013多校2 1001题）

    Balls Rearrangement Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Othe ...

  4. 取maven copy部分

    mvn deploy:deploy-file -DgroupId=com.mycompany -DartifactId=my-project -Dversion=1.0.0 -Dpackaging=j ...

  5. B+树索引

    结构上 B树中关键字集合分布在整棵树中,叶节点中不包含任何关键字信息,而B+树关键字集合分布在叶子结点中,非叶节点只是叶子结点中关键字的索引: B树中任何一个关键字只出现在一个结点中,而B+树中的关键 ...

  6. Hibernate：不容易理解的 lock 和 merge

    背景 lock 和 merge 在字面上很容易理解它们的语义,不过它们的实际行为所代表的语义范围要大一点,本文就简单的记录下来,还请朋友们多批评和指正. Lock 官方的注释 /** * Obtain ...

  7. linux下批量添加新用户

    作为一个系统管理员,可能要经常的为机器添加用户,可能是在一台机器上添加很多用户,也有可能是在很多机器上要添加同一个用户. 基本上,批量添加用户有两种方式,一是用useradd + passwd命令配合 ...

  8. linux 编译win32程序

    apt-get install mingw32 int main(int argc, char *argv) { printf("Windows Compiler Test\n") ...

  9. cocos2d-x v3.0新特性及使用

    八月份cocos2d-x官网发布了v3.0版本,这次更新的内容特别多,包括2dx的架构以及使用 总得来说,给开发者带来了很大的便利: 运行环境需求: Android 2.3 or newer iOS ...

  10. ionic新手教程第八课-（加更）从无到有说Ionic、绘图说明MVC-U-S

    这节课的内容,有些前面几节已经说过了. 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic. 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的. 有些前 ...