var image = new Image(), counter = 0;
image.onload = function () {
var CANVAS_WIDTH = 300, CANVAS_HEIGHT = 300;
var canvas = $("#canvas").css({width:CANVAS_WIDTH, height:CANVAS_HEIGHT})
.attr({width:CANVAS_WIDTH, height:CANVAS_HEIGHT}).get(0), _ = this;
var context = canvas.getContext("2d");
context.font="24px Courier New"; var loop = function () {
context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
var drgee = counter * 10 % 360;
context.save();
var x = _.width / 2, y = _.height / 2
context.arc(x,y,5,0,2*Math.PI);
context.stroke();
context.translate(x, y);
context.rotate(drgee*Math.PI/180)
context.drawImage(_,-x,-y)
context.restore();
context.fillText(drgee, 100,100)
counter++;
}; window.setInterval(loop,1000/25); };
image.src="/images/game_gold.png"

  

Canvas 旋转的图片的更多相关文章

  1. Canvas旋转图片--保持相同大小的算法

     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...

  2. canvas旋转图片

    canvas旋转图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 图书管理之HTML5压缩旋转裁剪图片总结

    整体思路  : 在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的 ...

  4. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  7. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  8. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  9. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

随机推荐

  1. IEnumerable 与 IEnumerable<T>

    转自:https://blog.csdn.net/qq_21419015/article/details/80495322 IEnumerable 和IEnumerable<T> 接口在 ...

  2. 9、Qt Project之简单的数据库接口

    简单的数据库接口  Step1:首先完成整个UI界面的额设计: <?xml version="1.0" encoding="UTF-8"?> < ...

  3. oracle中两个时间类型的数据相减默认得到的是天数。

    想要得到月份数,需要使用months_between函数. months_between(to_date('201707','yyyyMM'),to_date('201706','yyyyMM'))  ...

  4. 【LeetCode算法-20】Valid Parentheses

    LeetCode第20题 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determin ...

  5. 【Spring Boot】使用JDBC 获取相关的数据

    使用JDBC 获取相关的数据 什么是JDBC Java Database Connectivity 是一种用于执行SQL语句的Java API,与数据库建立连接.发送 操作数据库的语句并处理结果. S ...

  6. Mybatis之占位符与拼接符

    1.占位符 1.1  含义: 在持久化框架中,为了将约束条件中的可变参数从sql中分离出来,在原有的参数位置使用特殊的标记来标记该位置,后期通过代码给sql传递参数(即实现sql与代码分离开).这个特 ...

  7. gdb windbg and od use

    gdb aslr -- 显示/设置 gdb 的 ASLR asmsearch -- Search for ASM instructions in memory asmsearch "int ...

  8. 英语口语练习系列-C34-儿童-谈论物品和人-武陵春

    词汇-儿童 child a child favorite game toy regulation breadwinner dominant selfish ancestor custom belief ...

  9. 1171 Big Event in HDU 01背包

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1171 题意:把商品分成两半,如不能均分,尽可能的让两个数相接近.输出结果:两个数字a,b且a>=b. ...

  10. Scrapy基础(二)————Scrapy的安装和目录结构

    Scrapy安装: 1,首先进入虚拟环境    2,使用国内豆瓣源进行安装,快! pip install -i https://pypi.douban.com/simple/ scrapy 3,特殊情 ...