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> ...
随机推荐
- synchronized (lock) 买票demo 线程安全
加锁防止多个线程执行同一段代码! /** http://blog.51cto.com/wyait/1916898 * @author * @since 11/10/2018 * 某电影院目前正在上映贺 ...
- SQLite数据库学习小结——native层实现
1. SQlite概述 SQLite是一款轻量.快速.跨平台的嵌入式数据库,是遵守ACID(注:ACID指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consi ...
- test20181006 石头剪刀布
题意 分析 考场做法同题解一样. std代码. #include<bits/stdc++.h> using namespace std; template <typename T&g ...
- centos 安装 mysql(指定安装版本)
第一步: 下载 mysql 包 第二步: rpm -Uvh mysql文件名.rpm ,这里是 rpm 其实不是安装mysql ,而是安装了一个mysql 的 yum 源 仓库 /etc/yum. ...
- POJ1135 Domino Effect
题目:http://poj.org/problem?id=1135 只是求以1为起点的最短路罢了.稍稍判断一下在边上的情况. 多亏提醒:毒数据——n==1!一定要dis [ k ] >= ans ...
- [boost] : lightweight_test库
lightweight_test轻量级单元测试框架, 只支持最基本的单元测试, 不支持测试用例, 测试套件的概念, 简单小巧, 适合要求不高或者快速测试的工作. 基本用法 需要包含头文件#includ ...
- ASP.NET网站权限设计实现（二）——角色权限绑定
1.关于使用的几张表的说明 (1)Module:模块表,记录模块名称.编码等模块基本数据. (2)Permissions:权限表,记录所有模块权限distinct之后的数据. (3)Modu ...
- 关于有时候导入maven项目时候报错(有红色叹号,类中导入的包提示"the import java.util cannot be resolve,")
------解决方案--------------------解决方案:右键项目-------buildpath--------最下面那个configura...的选择libraries找到JRE(这个 ...
- BASIC-14_蓝桥杯_时间转换
示例代码: #include <stdio.h> int main(void){ int t = 0 , h = 0 , m = 0 , s = 0 ; scanf("%d&qu ...
- 1037 Magic Coupon （25 分）
1037 Magic Coupon (25 分) The magic shop in Mars is offering some magic coupons. Each coupon has an i ...