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上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- 实现判断条件中有in的判断
如果是简单的写sql,在where中写死就可以了,但是如果是不确定的参数呢,这个时候就需要一点处理方式了. 1.后台的写法 String[] operateResult=new String[]{&q ...
- pythonclass,day1-day2.
由于是小白,真的一点点的基础都没有,所以压力确实有点大的.全程都是在碰壁,没有明白的地方,装个软件都问题层出不穷,别人几秒钟搞定的,我需要几十分钟,甚至更久...真的是,太强烈的挫败感了,整个人被乌云 ...
- Python isinstance 方法 判断 built-in types(内置类型)技巧
Python isinstance 方法 判断 built-in types(内置类型)技巧 d = {} isinstance(d, type({})) isinstance(d, dict) l ...
- Codeforces 1130D1 Toy Train (Simplified) (思维)【贪心】
<题目链接> 题目大意: 有一个的环形火车站,其中有$[1,n] n$个站台,站台上能够放糖果,火车只能朝一个方向移动,如果火车在站台$i$,那么下一秒就会在$i+1$站(如果$i=n$, ...
- 从零搭建 ES 搜索服务(四)拼音搜索
一.前言 上篇介绍了 ES 的同义词搜索,使我们的搜索更强大了,然而这还远远不够,在实际使用中还可能希望搜索「fanqie」能将包含「番茄」的结果也罗列出来,这就涉及到拼音搜索了,本篇将介绍如何具体实 ...
- CLR Via 第一 章 知识点整理(1)
写这个纯粹是自己的一点学习总结,其实就学习的笔记整理,相当于对自己的一点督促,如有看到不正确的欢迎指出 一般我们写代码都是使用的高级语言,但是在CLR中运行的代码并不是我们直接写的代码,而是通过我们选 ...
- ubuntu安装虚拟环境
首先 sudo pip install virtualenv sudo pip install virtualenvwrapper 然后进行配置 sudo gedit /.bashrc export ...
- 解决Echarts封装成组件时只有最后一个才会缩放的问题
参考了此文,并且强烈建议去看http://blog.csdn.net/crper/article/details/76091755 一般网上的方法都是 mounted() { this.drawCha ...
- 第一章 初始STM32
1.3什么是STM32? ST是意法半导体,M是MIcroelectronisc的缩写,32表示32位. 合起来就是:ST公司开发的32位微控制器. 1.4 STM32 能做什么? STM32属于一个 ...
- nodejs 支付宝app支付
[链接]单笔转账到支付宝账户产品介绍更新时间:https://docs.open.alipay.com/309 const crypto = require('crypto') const momen ...