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上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- instance of的java用法
http://blog.csdn.net/liranke/article/details/5574791
- Oracle中start with...connect by子句的用法
http://www.blogjava.net/xzclog/archive/2010/03/05/314642.html
- JetBrain(Pycharm,Clion...)的使用优化
我们知道,在JetBrain系列软件中,另起一行继续编辑的快捷是Shift+Enter,这样即使指针没有到达当前行结尾,也可以另起一行,如图1中的情况: >>> Shift+ ...
- Django之第三方登陆模块
Django之第三方登陆模块 前期准备 安装 django-allauth pip install django-allauth 注意,django-allauth 需要在 Django1.10以上版 ...
- spring cloud 详解
https://www.cnblogs.com/qdhxhz/p/9601170.html SpringCloud(8)---zuul权限校验.接口限流 https://blog.csdn.net/c ...
- Git rebase命令实战
一.前言 一句话,git rebase 可以帮助项目中的提交历史干净整洁!!! 二.避免合并出现分叉现象 git merge操作 1.新建一个 develop 分支 2.在develop分支上新建 ...
- linux平台,对线程等待和唤醒操作的封装(pthread_cond_timedwait 用法详解)
前言 linux平台下,线程等待和唤醒操作是很常见的,但是平台函数不易使用:笔者对此操作做了封装,使之更易于使用. 线程等待和唤醒函数比较 平台提供了线程等待相关函数,这些函数之间用法也有些差异: s ...
- linux相关操作命令
1.复制文件:cp -r file ./src 2.删除文件:rm -rf file 3.解压文件:tar -xvf bianque.tar.gz
- Meet Hadoop
全书目前刚看到3.2,博客进度会慢一些,很多问题和例子需要操作一遍才能弄清楚. Why Hadoop 解决的问题 Hadoop的优势 小黄象Hadoop? 学习路线 简单总结 Why Hadoop 解 ...
- MacOs brew 命令行安装常见工具
brew类似ubuntu系统下的apt-get的功能 安装方法: 在Mac中打开Termal: 输入命令: ruby -e "$(curl -fsSL https://raw.githu ...