目前理解下来就是旋转的不是image本身,而是要drawImage的那个canvas的2d context,context本身的绘制就是把图片本来的样子draw出来,至于旋转,透明度之类的效果都是对context在操作。

至于做到让image绕自身中心店改变角度的做法,就是让context坐标转换,并且让context改变角度,context.rotate()方法接受根据角度转换之后的弧度。

设置一个坐标,让image坐上角定位在此坐标并以此坐标为锚点选转

  context.translate(buildingImgX,buildingImgY);
context.rotate(50 * Math.PI / 180);
context.translate(-buildingImgX,-buildingImgY);
context.drawImage(buildingImg,buildingImgX ,buildingImgY );

设置一个坐标,让image中心店点定位在此坐标并以此坐标为锚点选转

  buildingImgX = canvasWidth - buildingImg.width/2 - 100;
buildingImgY = canvasHeight / 2; context.translate(buildingImgX,buildingImgY);
context.rotate(10 * Math.PI / 180);
context.translate(-buildingImgX,-buildingImgY);
context.drawImage(buildingImg,buildingImgX - buildingImg.width/2,buildingImgY - buildingImg.height/2);

转帖别人代码:

 var canvas = document.getElementById('c1');
var ctx1 = canvas.getContext('2d');
var image1 = new Image();
image1.onload = function() {
// regular rotation about center
var xpos = canvas.width/2;
var ypos = canvas.height/2;
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.save();
ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);//旋转47度
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.restore();
}
image1.src = 'image.png';

html5原生canvas内image旋转的更多相关文章

  1. HTML5之canvas细节详谈

    一.canvas基础 1.canvas是HTML5 的新标签,其默认宽高为300*150.      canvas 元素本身是没有绘图能力的.所有的绘制工作必须在 JavaScript 内部完成.   ...

  2. 第165天:canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  3. HTML5中Canvas概述

    一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...

  4. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  5. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  6. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 教你使用HTML5原生对话框元素,轻松创建模态框组件

    HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...

随机推荐

  1. asp.net MVC之 自定义过滤器(Filter) - shuaixf

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration :缓存的时间, 以 ...

  2. LeetCode 7 Reverse Integer int:2147483647-2147483648 难度:2

    https://leetcode.com/problems/reverse-integer/ class Solution { public: int inf = ~0u >> 1; in ...

  3. ios企业应用部署

    最近公司要整一套企业内部用的应用,ios版本不上线要求可以随时下载使用,先是申请了企业者开发账号,然后发布应用,部署在自己服务器上供用户下载安装. 第一步:准备好应用相关的东西,基本上就是两个文件,x ...

  4. HDU 4938 Seeing People(2014 Multi-University Training Contest 7)

    思路:根据出发时间把点往速度反方向移动 t*v的 的距离这样就可以当成 全部点一起出发,再把y轴上的点固定不动相当于x轴的点向(-v2,v1)方向移动 .可以把所有点映射到x轴上进行统计即可(要记住同 ...

  5. Adapter 启动时报错——2

    在安装tibco adr3  7.00以前的版本,在designer中启动adr3 会报出“无法加载adr3.dll”文件的错误,这是因为在designer中的palettes默认是指向adapter ...

  6. 调整ESX的VMFS磁盘格式的块大小,让单个虚拟磁盘支持更大容量

    调整ESX的VMFS磁盘格式的块大小,让单个虚拟磁盘支持更大容量 前因:客户搭建了VMware ESX企业版的测试平台:有一天接到一个需求,是测试数据库的,需要一个300G的磁盘. 解决过程: 1.按 ...

  7. Swift 2.0 异常处理

    转自:http://www.jianshu.com/p/96a7db3fde00 WWDC 2015 宣布了新的 Swift 2.0. 这次重大更新给 Swift 提供了新的异常处理方法.这篇文章会主 ...

  8. VS2013 有效密钥

    今天打开笔记本上的VS2013,发现试用版到期了,就到网上找密钥,找了一些时候找到一个有效序列号,记录如下: BWG7X-J98B3-W34RT-33B3R-JVYW9

  9. wpf初步-grid布局-连连看棋盘

    private void Window_Loaded_1(object sender, RoutedEventArgs e) { //Button btn1 = new Button(); //btn ...

  10. c/c++常用网址

    个人主页Dennis Ritchie's home pagehttp://cm.bell-labs.com/cm/cs/who/dmr/index.html Brian Kernighan's hom ...