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上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- 005 使用SpringMVC开发restful API三--处理创建请求
一:主要任务 1.说明 @RequestBody 映射请求体到java方法的参数 日期类型参数的处理 @Valid注解 BindingResult验证请求参数的合法性并处理校验结果 二:@Reques ...
- int和intege相比
int i = 100; Integer i1 = 100; Integer i2 = new Integer(100); system.out.println(i == i1);true syste ...
- Masquerade strikes back Gym - 101911D (数学)
Quite often the jury of Saratov SU use the problem "Masquerade" in different practice sess ...
- HDU 5036 Explosion (传递闭包+bitset优化)
<题目链接> 题目大意: 一个人要打开或者用炸弹砸开所有的门,每个门后面有一些钥匙,一个钥匙对应一个门,告诉每个门里面有哪些门的钥匙.如果要打开所有的门,问需要用的炸弹数量为多少. 解题分 ...
- Person Re-ID行人重试别梳理
定义 是利用计算机视觉技术判断图像或者视频序列中是否存在特定行人的技术.给定一张切好块的行人图像 (probe image,), 从一大堆切好块的图像 (gallery images) 中找到同一身份 ...
- Python itertools模块详解
这货很强大, 必须掌握 文档 链接 http://docs.python.org/2/library/itertools.html pymotw 链接 http://pymotw.com/2/iter ...
- JavaScript基础笔记(十一)JSON
JSON 关于JSON,最重要的一点是理解它是一种数据格式,不是编程语言. 一.语法 JSON 不支持变量.函数或对象实例,它就是一种表示结构化数据的格式,虽然与 JavaScript 中表示数据的某 ...
- cout endl in c++
#include<iostream> using namespace std; int main() { cout<<endl; endl(cout); getchar(); ...
- 冲刺NOIP复习,算法知识点总结
前言 离NOIP还有一个星期,匆忙的把整理的算法补充完善,看着当时的整理觉得那时还年少.第二页贴了几张从贴吧里找来的图片,看着就很热血的.当年来学这个竞赛就是为了兴趣,感受计算机之美的. ...
- 考前停课集训 Day5 累
Day 5 今天不考试 因此自己订正+刷题 我就当日记来写吧 昨天棕名了…… 所以借了同学的号打题 NOIP前的崩心态啊QAQ 希望一切安好