canvas内image旋转

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

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

        var xpos = 100;
        var ypos = 100;
        context.drawImage(img, xpos - img.width / 2, ypos - img.height / 2);
        context.save();
        context.translate(xpos, ypos);
        context.rotate(50 * Math.PI / 180);//旋转50度
        context.translate(-xpos, -ypos);
        context.drawImage(img, xpos - img.width , ypos - img.height ,img.width *2,img.height*2);
        context.restore();
时间: 2024-11-08 18:58:39

canvas内image旋转的相关文章

js之实现页面内所有图片旋转

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.s

用canvas画会旋转的伞

这个例子是我在网上看到,然后仿写的. 主要用到canvas画图. 首先,需要在页面上创建一个画布 <canvas id="mycanvas" width="1200" height="600" style=""></canvas> 现在来开始画图: 先给出用到的参数: var ctx; var updown; // 上下移动 var cwidth = 1200; var cheight = 600; v

html canvas非正方旋转和缩放...写的大多是正方的有人表示一直看正方的看厌了

<!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-

html5 canvas围绕中心点旋转

<!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-

canvas 动态飞速旋转的矩形

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>变形</title> <script type="text/javascr

[ html canvas 旋转 缩放 平移 ] canvas绘图实现旋转复制实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附:android反三角函数小结

自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我要以两点的中点mid(x,y)为坐标原点,线段l的中垂线为一个轴,l为另外一个轴,做一个坐标系.切割出一个边长为d的正方形.示意图如下所示: double d = Math.sqrt((p2.x-p1.x)*(p2.x - p1.x)+(p2.y-p1.y)*(p2.y-p1.y)); //p1.p

canvas实例:旋转缩放的方块

首先在页面中创建一个canvas标签: <body> <canvas id="c1" width="500" height="500"></canvas> </body> js部分: 注意save()和restore()的运用,在num累加的情况下,保存路径和恢复路径可以让方块匀速运动: 定义变量num和value来设置临界点的方法. <script> window.onload = f

HTML5之canvas 7画布旋转

1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>画布旋转</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 7