Canvas 旋转的图片
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 旋转的图片的更多相关文章
- Canvas旋转图片--保持相同大小的算法
function drawImg(angle) { canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...
- canvas旋转图片
canvas旋转图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 图书管理之HTML5压缩旋转裁剪图片总结
整体思路 : 在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的 ...
- canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- day 49-css补充(终结)[浮动和定位]
老师的笔记: 前情回顾: day49 混乱即阶梯. 1. 前情回顾 HTML HTTP和HTML 文档机构 <!Doctype html> HTML head <meta> & ...
- OpenJ_Bailian 2810 完美立方
题目地址: https://vjudge.net/problem/OpenJ_Bailian-2810 形如a3= b3 + c3 + d3的等式被称为完美立方等式.例如123= 63 + 83 + ...
- Kafka的接口回调 +自定义分区、拦截器
一.接口回调+自定义分区 1.接口回调:在使用消费者的send方法时添加Callback回调 producer.send(new ProducerRecord<String, String> ...
- VC9、VC11、VC14、VC15库 32位 64位 免费下载
VC9.VC11.VC14.VC15库 32位 64位 免费下载 更新版本的PHP是用VC11,VC14或VC15(分别为Visual Studio 2012,2015或2017编译器)构建的,并且包 ...
- Codefoces Gym 101652 【最大连续和】
<题目链接> 题目大意: 给你一段只由 'B'和'R'组成的字符串,问你在连续的区间内,"B"和"R"的差值最大是多少,输出该区间:如果对于差值相等 ...
- hdu2473
hdu2473并查集的删除操作建立虚点,删除它就断掉了它在原图中的所有关系,而成为独立节点,而且它只能被删除一次,而且删除之后还能进行操作,采用映射(虚点)的方法,建立虚点并把删除之后的操作挪到虚点上 ...
- Django Simple Captcha插件
正文开始 先看官方描述 1.安装 打开控制台,输入如下: pip install django-simple-captcha 2.把APP添加到Django项目进入自己的Django项目,在setti ...
- BZOJ.1210.[HNOI2004]邮递员(插头DP Hash 高精)
BZOJ 洛谷 http://www.cnblogs.com/LadyLex/p/7326874.html 插头DP.\(m+1\)个插头的状态需要用三进制表示:\(0\)表示无插头,\(1\)表示是 ...
- 蓝桥杯——代表团出访——C++
问题描述: X星球要派出一个5人组成的观察团前往W星. 其中: A国最多可以派出4人. B国最多可以派出2人. C国最多可以派出2人. D国最多可以派出1人. E国最多可以派出1人. F国最多可以派出 ...
- Java笔记(一)编程基础与二进制
编程基础与二进制 一.编程基础 函数调用的基本原理: 函数调用中的问题: 1)参数如何传递? 2)函数如何知道返回什么地方? 3)函数结果如何传递给调用方? 解决思路是使用内存来函数调用过程中需要的数 ...