HTML5 Canvas 小例子 伸缩旋转方块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: black;
}
#canvas {
background: white;
margin: 100px 0 0 300px;
}
#canvas>span {
color: white;
font-size: 14px;
}
</style>
<body>
<canvas id="canvas" width="600" height="500">
<span>您的浏览器不支持</span>
</canvas>
</body>
</html>
<script type="text/javascript">
/*获取绘制环境*/
var oc = $('#canvas')[0];
var canvas = oc.getContext('2d');
/*偏移*/
canvas.translate(200, 200);
var num = 0, multiple = 1, value = 1;
setInterval(function(){
num++;
if(multiple == 100 || multiple == 0){
value *= -1;
}
multiple += value;
/*局面canvas的起始点*/
canvas.save();
/*图形倍数(横向放大倍数,纵向放大倍数)*/
canvas.scale(multiple*1/50, multiple*1/50);
/*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/
canvas.clearRect(-150, -150, oc.width, oc.height);
/*旋转弧度*/
canvas.rotate(num*Math.PI/180);
/*偏移旋转中心*/
canvas.translate(-50, -50);
/*填充方块*/
canvas.fillRect(0, 0, 100, 100);
/*局面canvas的结束点*/
canvas.restore();
}, 30);
</script>
HTML5 Canvas 小例子 伸缩旋转方块的更多相关文章
- HTML5 Canvas 小例子 旋转的图片
<一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...
- HTML5 Canvas 小例子 旋转的时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 小例子 简易画板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- HTML5 Canvas小游戏基础:用户交互
交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1.事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...
- html5 canvas多个图像旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WPF Canvas小例子
源码下载:DraggingElementsInCanvas_demo.rar
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- 在linux下使用am335x的DMA
[本文首发于cnblogs,作者:byeyear,Email:east3@163.com] 这几天在弄am3358的DMA,简化应用环境如下: am3358的FSMC接了一片FPGA: FPGA上接A ...
- C++11--正则表达式<regex>
/* 正则表达式:一个指定的模式用来对文本中的字符串提供精确且灵活的匹配 */ #include <regex> using namespace std; int main() { str ...
- Dubbo(6)Dubbo服务集群实现负载均衡
什么时候用到集群?比如说某个服务,并发量特别大的时候就会用到集群: 具体的话比如说,某些特殊的项目一天的注册量10万,国家的一些考试系统,集中在几天,注册量一天10万,如果只弄一个服务,根本服务不过来 ...
- java设计模式-工厂系列
一.简单工厂 1.背景: 任意定制交通工具的类型和生产过程 代码: Moveable.java package com.cy.dp.factory; public interface Moveable ...
- java设计模式-Iterator
Iterator模式 主要是用在容器的遍历上,其他的地方都不怎么用:理解一下,会用了就可以了: 1.背景 请动手自己写一个可以动态添加对象的容器: 代码: ArrayList.java(是自己实现 ...
- HDOJ 2019 数列有序!
#include<vector> #include<iostream> #include<algorithm> #include<cstdio> usi ...
- [UE4]时间轴线TimeLine,Lerp插值
一.TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点. 二.Lerp插值 Lerp插值一般与 ...
- [UE4]响应鼠标点击
- 可变卷积Deforable ConvNet 迁移训练自己的数据集 MXNet框架 GPU版
[引言] 最近在用可变卷积的rfcn 模型迁移训练自己的数据集, MSRA官方使用的MXNet框架 环境搭建及配置:http://www.cnblogs.com/andre-ma/p/8867031. ...
- webpack 配置案例for angular babel
1.dev.js: const webpack = require('webpack'); const webpackUglifyJsPlugin = require('webpack-uglify- ...