html5 中心点旋转,html5 canvas围绕中心点旋转
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.fillStyle="black";
context.fillRect(20,20,25,25);
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.rotate(angleInRadians);
context.fillStyle="red";
context.fillRect(-.5*width,-.5*height,width,height);
}
}
你的浏览器无法使用canvas
小白童鞋;你的支持是我最大的快乐!!
这一次我们设置了变量。。。是不是感觉看起来莫名的亲切了
var x = 100;
var y = 100;
var width = 50;
var height = 50;然后我们用函数context.translate把画布原点平移到红色正方形的中心点。这个函数可以将画布原点移到(x,y)处。这里将原点X坐标值设为红色正方形的左上角的X值(100)加上其一半的宽度。使用前面创建的变量即可控制这个红色正方形的属性X+0.5*width然后Y坐标然后执行平移函数然后旋转
实现canvas以图片中心旋转
利用canvas的roate和translate方法实现按中心旋转的效果
新建html页
定义画布,以及图案的位置和大小参数
obj.x/y为长方形在canvas中的位置
obj.width/height为长方形的宽高
画一个简单的长方形,让它每100毫秒旋转1度
浏览器中打开页面会发现,旋转是以画布的左上角为圆心的
在旋转之前,把画布的中心位置translate到图片的中心
旋转之后,把中心translate回初始的位置,然后再绘制长方形
完成,浏览器打开页面,可以看到图案以中心旋转的效果
canvas{
position: absolute;
border: 1px solid;
}
var ctx1=canvas1.getContext('2d');
var obj={
x:100,
y:200,
width:200,
height:400
};
/**
* 画一个简单的长方形,让它每100毫秒旋转1度
*/
// 浏览器中打开页面会发现,旋转是以画布的左上角为圆心的
function rotate(){
ctx1.clearRect(0,0,800,800);
ctx1.fillStyle='blue';
ctx1.rotate(Math.PI/180);
ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
}
// 在旋转之前,把画布的中心位置translate到图片的中心
function rotate2(){
ctx1.clearRect(0,0,800,800);
ctx1.fillStyle='blue';
ctx1.translate((obj.x+(obj.width/2)),(obj.y+(obj.height/2)));
ctx1.rotate(Math.PI/180);
ctx1.translate(-(obj.x+(obj.width/2)),-(obj.y+(obj.height/2)));
ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
}
// setInterval(rotate,100);
setInterval(rotate2,100);
来源:https://www.cnblogs.com/jiangxiaobo/p/6124756.html
html5 中心点旋转,html5 canvas围绕中心点旋转相关推荐
- canvas绘图 -实现图片围绕中心点旋转
今天想要学习制作一个抽奖的转盘,想用canvas来绘制转盘,于是重新学习了一下canvas. 1.canvas的使用 要使用元素,必须先设置其width和height属性,制定额可以绘图的区域大小.出 ...
- HTML5 和 CSS3 提高篇 下 2D转换 transform(移动、旋转、缩放、中心点、综合写法);动画(animation);3D转换;浏览器私有前缀;背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果 转换(tran ...
- html5图像不停旋转,html5 canvas多个图像旋转
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh ...
- Android Canvas.roate中心点旋转问题
在自定义View时候使用Canvas画图时候有时候需要对内容进行旋转,在使用roate旋转时候都知道围绕中心点旋转.但是中心点是哪里呢,中心点就是绘制区域的左上角,假如现在已经使用canvas绘制了好 ...
- html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTML结果只需 ...
- 一个围绕中心点旋转的动画效果
View围绕中心点旋转,直接上代码: final ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotation& ...
- html5制作风车旋转,HTML5 Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解. 在进行教学之前,我想聪明的你已经掌握了基本的Canvas基本操作方法,如果对Canvas还不是很了解,那么 ...
- HTML5七夕情人节表白网页(流星雨3D旋转相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程 ...
- css旋转不围绕圆心,css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed])...
css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed]) 我有这个演示 . 如图所示,元素围绕其中心旋转,但我正 ...
最新文章
- AngularJs异步文件上传
- caffe依赖项安装
- Windows下安装python的pip
- CEMAPI实战攻略(四)——发送短消息
- 23名“无名氏”流浪者成长沙县新市民
- springboot10(docker)
- 飞鸽传书2011比飞鸽传书2007的进化
- Python基础 ( 十 ) —— 面向对象(多态、封装、反射、动态导入)
- 下列不属于计算机网络特点的是自主性,计算机网络技术B卷
- 在线教育高保真小程序Axure原型模板
- IOS软件工程师课程分享
- 毕业设计-两轮自平衡小车主控板
- 你的GitHub代码已打包运往北极,传给1000年后人类!网友:我的Bug还没修复...
- protected使用总结
- git 提交错误:The requested URL returned error: 502
- 重庆大Vseo这么多年的seo心得
- android 蓝牙自动断开,Android蓝牙:连接()/断开()
- 为什么我们需要新颖的身份验证方案?
- UICollectionView左对齐
- 三菱FX系列PLC以太网连接杰控FameView
热门文章
- 浪潮信息边缘服务器测试,浪潮信息边缘AI服务器全面支持NVIDIA EGX平台
- python 发送outlook邮件(html)格式需要避的坑
- pytorch的paramter
- php 获取qq头像,php只需要一个QQ号就可以获得用户信息(昵称、头像)
- 安卓项目查手机电量功能_安卓手机如何查电池使用寿命
- 【项目】Java学生宿舍管理系统,赠予即将毕业的兄弟!
- mysql连接数据了的dep_MySQL数据库基础
- Pycharm浏览器打开报错解决
- 收集到一些关于python的文章,存起来慢慢看。。。
- python植物大战僵尸 豆约翰,python植物大战僵尸六之添加僵尸