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> ...
随机推荐
- hdu2065 "红色病毒"问题 指数型母函数
关于指数型母函数的题目,通过用公式并展开得到系数做的吧,取最后两位就是对100取模 #include<stdio.h> int QuickPow(int a,long long n,int ...
- 网络流--最大流dinic模板
标准的大白书式模板,除了变量名并不一样……在主函数中只需要用到 init 函数.add 函数以及 mf 函数 #include<stdio.h> //差不多要加这么些头文件 #includ ...
- LG2375 [NOI2014]动物园
题意 给定一个长为\(L\)的字符串(\(L \leq 1e6\)) 求一个\(num\)数组,\(num[i]\)表示长度为\(i\)的前缀中字符串\(S'\)的数量,其中\(S'\)既是该前缀的前 ...
- 修改ThinkPHP缓存为Memcache的方法
一般来说,ThinkPHP的默认缓存方式是以File文件方式实现的,运行时会在/Runtime/Temp 下生成很多的缓存文件. 有的情况下服务器装了memcached之后,需要将ThinkPHP的缓 ...
- Entities、pads、links 实体、垫、链接
Entities.pads.links 实体.垫.链接 Entities:1.实体由一个struct media_entity实例表示.结构通常嵌入到一个较高级别的结构,例如v4l2_subdev或v ...
- [LeetCode系列] 双单链表共同节点搜索问题
找到两个单链表的共同节点. 举例来说, 下面两个链表A和B: A: a1 → a2 ↘ c1 → c2 → c3 ↗ B: b1 → b2 → b3 共同节点为c1. 分析: 共同节点距离A,B的起点 ...
- JZ2440 裸机驱动 第13章 LCD控制器(1)
本章目标 了解LCD显示器的接口及时序: 掌握S3C2410/S3C2440 LCD控制器的使用方法: 了解帧缓冲区的概念,掌握如何设置帧缓冲区来显示图像: 13.1 LCD和LCD控制器 13.1 ...
- 织梦调用文章 ID (来源：百度知道)
问:{dede:field.id /} {dede:channel type='son' orderby='sortrank'} <a href='[field:typeurl/]'>&l ...
- FPGA该如何应对ASIC的大爆发？
有人认为,除了人才短缺.开发难度较大,相比未来的批量化量产的ASIC芯片,FPGA在成本.性能.功耗方面仍有很多不足.这是否意味着,在ASIC大爆发之际,FPGA将沦为其“过渡”品的命运? 安路科技市 ...
- 【Spring学习笔记-MVC-16】Spring MVC之重定向-解决中文乱码
概述 spring MVC框架controller间跳转,需重定向,主要有如下三种: 不带参数跳转:形如:http://localhost:8080/SpringMVCTest/test/myRedi ...