HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 绘制一片星空
*/
cxt.fillStyle = 'black';
cxt.fillRect(0, 0, canvas.width, canvas.height); for(var i = 0; i <= 300; i++){
var fiveStart = {};
fiveStart.Radius = Math.random()*6+6;
fiveStart.offsetX = Math.random()*canvas.width;
fiveStart.offsetY = Math.random()*canvas.height;
fiveStart.RotationAngle = Math.random()*360; drawFiveStar(cxt, fiveStart);
} /**
* 控制五角星的方法
*/
function drawFiveStar(cxt, fiveStart){
cxt.save();
cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量
cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)
cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )
fiveStartPath(cxt);
cxt.fillStyle = "yellow";
cxt.fill();
cxt.restore();
} /**
* 绘制标准五角星路径的方法
*/
function fiveStartPath(cxt){
cxt.beginPath();
var x = 0; y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i)/180*Math.PI);
y = Math.sin((18+72*i)/180*Math.PI);
cxt.lineTo(x, 0-y);
x = Math.cos((54+72*i)/180*Math.PI)/2.0;
y = Math.sin((54+72*i)/180*Math.PI)/2.0;
cxt.lineTo(x, 0-y);
}
cxt.closePath();
}
</script>
HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale的更多相关文章
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5之图形变换
- Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...
- html5 canvas缩放变换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Canvas 总结，到第4章 canvas图形变换
canvas 必须认识到的大坑 <!-- 重点: 在js/canvas标签中定义的宽和高是画布实际的宽和高. 在样式表中定义的宽和高是画布缩放后的宽和高. 即:把js/canvas实际大小缩放到 ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Struts2重新学习1
一:框架 1:框架的意义在于可以大大提高我们的开发效率.框架时一种主动设计,使用框架必须遵守框架指定好的开发流程. 2:框架的强大之处不是源自它能让你做什么,而是它不能让你做什么.有规有矩,方可成方圆 ...
- atitit.加入win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux
atitit.加入win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux 系统服务不同于普通视窗系统应用程式.不可能简简单单地通过执行一个EXE就启动视窗系 ...
- 【转】每天一个linux命令（27）：linux chmod命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/29/2794010.html chmod命令用于改变linux系统文件或目录的访问权限.用它控制文 ...
- npx 知识点
npx 介绍:https://segmentfault.com/a/1190000010149499
- Spring核心思想：“控制反转”，也叫“依赖注入” 的理解
@Service对应的是业务层Bean,例如: @Service("userService") public class UserServiceImpl implements Us ...
- CentOS7.1下生产环境Keepalived+Nginx配置
CentOS7.1下生产环境Keepalived+Nginx配置 [日期:2015-07-20] 来源:Linux社区 作者:soulful [字体:大 中 小] 注:下文涉及到配置的,如无特别 ...
- SpringCloud统一配置之使用配置
配置的读取方式在上一篇文章中有提到. 取到值之后赋值给静态类里的静态变量. 因为SpringCloud项目启动的时候会把所有的api都执行一遍(相当蛋疼),所以这里直接就可以写一个方法进行赋值. 代码 ...
- 术语-服务：BaaS
ylbtech-术语-服务:BaaS BaaS(后端即服务:Backend as a Service)公司为移动应用开发者提供整合云后端的边界服务. 1.返回顶部 1. 中文名:后端即服务 外文名:B ...
- js读取解析JSON类型数据
原文地址:http://www.ablanxue.com/prone_3691_1.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立 ...
- Java 默认事务级别read committed对binlog_format的需求
转载: java.sql.SQLException: Cannot execute statement: impossible to write to binary log since BINLOG_ ...