HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )
<!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'); /**
* 绘制一轮弯月
*/ fillMoon(cxt, 2, 400, 300, 200, 0); function fillMoon(cxt, d, x, y, R, rot){
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R, R);
pathMoon(cxt, d);
cxt.fillStyle = '#fb5';
cxt.fill();
cxt.restore();
} function pathMoon(cxt, d){
cxt.beginPath();
cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);
cxt.moveTo(0, -1);
cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
cxt.closePath();
} function dis(x1, y1, x2, y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
</script>
<!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.clearRect(0, 0, canvas.width, canvas.height)
var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);
skyStyle.addColorStop(0.0, '#035');
skyStyle.addColorStop(1.0, 'black');
cxt.fillStyle = skyStyle;
cxt.fillRect(0, 0, canvas.width, canvas.height); for(var i = 0; i < 150; i++){
var fiveStart = {};
fiveStart.Radius = Math.random()*4+4;
fiveStart.offsetX = Math.random()*canvas.width;
fiveStart.offsetY = Math.random()*canvas.height*0.65;
fiveStart.RotationAngle = Math.random()*360;
drawFiveStar(cxt, fiveStart);
}
fillMoon(cxt, 1, 800, 150, 80, 30); /**
* 绘制月亮的方法
*/
function fillMoon(cxt, d, x, y, R, rot){
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R, R);
pathMoon(cxt, d);
cxt.fillStyle = 'yellow';
cxt.fill();
cxt.restore();
}
function pathMoon(cxt, d){
cxt.beginPath();
cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);
cxt.moveTo(0, -1);
cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
cxt.closePath();
} function dis(x1, y1, x2, y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
} /**
* 控制五角星的方法
*/
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 ( 绘制一轮弯月, 星空中的弯月 )的更多相关文章
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- centos7 使用mount 挂载window10 (超简单)
一直使用vmware tools 挂载,发现好多问题,折腾了大半天放弃了,现在使用mount挂载,发现简单多了 一丶首先添加你需要共享的Windows文件夹,右键 记得要选择 Everyone 和一个 ...
- jq 分页
转自:https://www.cnblogs.com/wolflower/p/6898479.html参考:https://github.com/tianxiangbing/paging先引入这两个插 ...
- Vue中的“混合”——mixins使用方法
混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...
- stenciljs 学习三 组件生命周期
stenciljs 组件包含好多生命周期方法, will did load update unload 实现生命周期的方法比价简单类似 componentWillLoad ....,使用typescr ...
- FastAdmin 开发第一天：了解 FastAdmin 框架
了解 FastAdmin 框架 后端组件 ThinkPHP 5 EasyWeChat qr-code 前端组件 AdminLTE bootstrap bootstrap-table jquery la ...
- Nginx 下部署 HTTPS 与安全调优
什么是 HTTPS?# HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的 ...
- tyvj1659中中救援队
题目:http://www.joyoi.cn/problem/tyvj-1659 发现每条边要走两次,每个点要走它连接的边数次. 所以把边的权值赋成 本身的值+两个端点的点权,求最小生成树即可. !边 ...
- Tomcat 8 中的startup.bat
1. bat文件 批处理文件,在DOS和Windows(任意版本)的系统中,bat文件是可执行文件 2. startup.bat 中涉及的bat语法 2.1 @. echo. echo off @ec ...
- php 非常简单的导入sql文件
在网上找了很多,都是写了一个类 做了各种处理.还真是累哦 当然之前也做了各种尝试 source 客户端命令 mysql_query()是不支持的 load_file 在where 之后执行可以,但是 ...
- Hadoop文件系统支持释疑之S3
一.引言 Hadoop版本提供了对多种文件系统的支持,但是这些文件系统是以何种方式实现的,其实现原理是什么以前并没有深究过.今天正好有人咨询我这个问题:Hadoop对S3的支持原理是什么?特此总结一下 ...