最近在写一个游戏,想让一个人物随着鼠标在原地旋转

在网上找了找,大都是用css写的,但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题

其中重要的两个方法:

context.translate(x,y)

用于重新设定画布的原点

参数是设定的原点坐标

context.rotate(角度*Math.PI/180)

让图片旋转,

参数是指旋转的弧度

如果要填入角度就像上面一样乘以 Math.PI/180

核心思路:

转载自:http://jingyan.baidu.com/article/ab0b56309719bac15afa7de9.html

如何用javascript中的canvas让图片自己旋转的更多相关文章

  1. 如何用JavaScript在浏览器端获取图片的原始尺寸大小?

    var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...

  2. 在jQuery中使用canvas时遇到的问题

    正常的情况下一般在JavaScript中使用canvas,会用到如下代码: var canvas=document.getElementById("canvas"); var co ...

  3. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  4. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  5. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  6. 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  7. html中canvas渲染图片,并转化成base64格式保存

    最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...

  8. 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  9. [TimLinux] JavaScript 如何在AJAX中替换元素的图片

    1. 示例代码 /* * <img id="idTestImg" src="/static/test.png" /> */ var idTestIm ...

随机推荐

  1. go 上下文context

    go控制并发有两种经典的方式,一种是WaitGroup,另外一种就是Context WaitGroup这种方式是控制多个goroutine同时完成 func main() { var wg sync. ...

  2. redhat6.5单用户重置root密码

    (1),按 “e” 键进入该界面,继续按 “e” 键进入下一个界面. (2).上下键选中第二个kernel选项,继续按 “e” 键进行编辑. (3).在新的界面里面加一个空格,再输入“1”:或者输入“ ...

  3. 攻防世界--re2-cpp-is-awesome

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/c5802869b8a24033b4a80783a67c858b 1.准备 获取信息 6 ...

  4. 【JAVA】毕向东Java基础视频教程-笔记

    传智播客-毕向东Java基础视频教程 <2013年-33days>版-学习代码记录 链接: GitHub库:JavaBXD33 目录 01-Java基础知识 02-Java对象细节 03- ...

  5. 参数化解决sql注入

    用DynamicParameters: string where = " where a.is_deleted=0 and a.bvent_id=@bventId and au.user_t ...

  6. JS面向对象——动态原型模型、寄生构造模型

    动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...

  7. 关于行内元素,内联元素before和after的大小设置问题

    :before /:after伪元素默认是一个行内元素,所以这个元素设置width/height是无效的

  8. Linux Shell 脚本学习第一天: 使用grep 命令,lsusb, ps -ef, 实现树莓派(Debian OS)时检测到依赖的USB设备启动后,启动终端自动执行shell脚本

    1.应用背景: 无人监测的设备,常需要设置应用程序开机启动,程序启动前需要保证调用的设备先启动,运行环境先启动. 2.test.sh部分源码 #!/bin/sh #查看桌面是否启动 while tru ...

  9. Sass-数据类型

    Sass和JavaScript语言类似,也具有自己的数据类型,在Sass中包含一下几种数据类型 数字:如,1,2,13,10px; 字符串: 有引号字符串或无引号字符串,如,“foo”,"b ...

  10. 服务器构建CentOS+Jenkins+Git+Maven之爬坑

    ssh端口变更后,git如何访问远端中央代码库 参考来源: http://wiki.jenkins-ci.org/display/JENKINS/Git+Plugin http://blog.csdn ...