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> ...
随机推荐
- Hadoop操作前准备工作
摘要:本文介绍Hadoop操作前的准备工作. 关键词:Hadoop Linux JDK WinSCP 俗语说,“磨刀不误砍柴工”.Hadoop操作前的准备工作可以加快Hadoop的操作与应用. ...
- leetcode:Path Sum【Python版】
1.类中递归调用函数需要加self # Definition for a binary tree node # class TreeNode: # def __init__(self, x): # s ...
- /etc/inittab 学习
1.文件内容 2.内容讲解 http://www.2cto.com/os/201108/98426.html init的进程号是1(ps -aux | less),从这一点就能看出,init进程是系统 ...
- 使用python生成词云
什么是词云呢? 词云就是一些关键词组成的一个图片.大家在网上经常看到,下面看一些例子: 那用python生成一个词云的话怎么办呢,首先要有一些词,咱们随便找个吧,用see you again的歌词好了 ...
- 浅谈c++中map插入数据的用法
map:数据的插入 在构造map容器后,我们就可以往里面插入数据了.这里讲三种插入数据的方法:第一种:用insert函数插入pair数据 map<int, string> mapStude ...
- FastAdmin 使用 Git 更新的新用法 （2019-02-28）
FastAdmin 使用 Git 更新的新用法 2019-02-28 新流程 增加一个 fastadmin 的远程仓库. 在项目的开发或主分支. 如果有代码更新将代码提交 commit. git pu ...
- es6 中，大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，确保采用严格模式
严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...
- centos6 ext4修复
输入root密码后: fsck -y /dev/mapper/vg_logserv-lv_root 修复完后重启 reboot 若忘记了root密码,可用系统ISO盘引导进入Rescue救援模式 在这 ...
- Server对象，HttpServerUtility类，获取服务器信息
在Asp.net WebForm中,Server对象是HttpServerUtility类的实例.看下图: 而在Asp.net MVC中,Server对象是HttpServerUtilityBase对 ...
- Jquery获取元素高度
第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...