HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo
<!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'); /**
* 贝塞尔二次曲线
* quadraticCurveTo(控制点的横坐标, 控制点的纵坐标, 曲线终点的横坐标, 曲线终点的纵坐标)
* 贝塞尔三次曲线
* bezierCurveTo(第一个控制点横坐标, 第一个控制点纵坐标, 第二个控制点横坐标, 第二个控制点纵坐标, 终点横坐标, 终点纵坐标)
*/ cxt.moveTo(300, 200);
//cxt.quadraticCurveTo(200, 200, 100, 300);
cxt.bezierCurveTo(400, 300, 200, 400, 300, 500);
cxt.strokeStyle = 'red';
cxt.lineWidth = 5;
cxt.stroke();
</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'); /**
* 绘制一片星空
*/
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);
drawLand(cxt); /**
* 绘制一片绿地
*/
function drawLand(cxt){
cxt.save();
cxt.beginPath(); cxt.moveTo(0, 500);
cxt.bezierCurveTo(540, 300, 660, 600, 1200, 500);
cxt.lineTo(1200, 600);
cxt.lineTo(0, 600); var LandStyle = cxt.createLinearGradient(0, 800, 0, 0);
LandStyle.addColorStop(0.0, "#030");
LandStyle.addColorStop(1.0, '#580');
cxt.fillStyle = LandStyle;
cxt.closePath();
cxt.fill();
cxt.restore();
} /**
* 绘制月亮的方法
*/
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 ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo的更多相关文章
- html5 canvas贝塞尔曲线篇(上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas贝塞尔曲线
贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...
- 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 ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas贝塞尔曲线 - 2
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM
- canvas贝塞尔曲线 - 1
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAAIcCAIAAADwgGbqAAAgAElEQVR4nOy9a4wb55nn20kOZhq7o8
- canvas ：曲线的面积图 加渐变效果
document.body.innerHTML = '<canvas></canvas>' var cvs = document.querySelector("can ...
随机推荐
- 使用npm init快速创建web 应用
一般来说我们会有npm init -y 快速生成package.json 文件, 但是npm init 可以使用脚手架工具,生成项目,比较方便 参考 npm init 帮助命令 npm init [- ...
- android 图片解码显示流程
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jingxia2008/article/details/32327699 问题来源 android 能 ...
- 分布式数据存储 shard（切片） 和 repali（副本） 的 节点数的关系。
1 , node 的 数量 应该大于等于 副本(指的是单个 shard 的 主副本+备份副本数)的 数量 ,如果 副本的数量大于 node 数量,那么 一个node 必定有2 个相同的 副本,这个多出 ...
- Apache关闭VirtualHost的Log日志记录
有时我们的apache产生的日志是超大的并且 没什么用处,这时我们就可以关闭了,关闭apache日志很简单,直接ErrorLog off或 # CustomLog即可. Web server(ex: ...
- 【Reporting Services 报表开发】— 如何根据明细的行数实现分页（比如每隔5行分页）
一.新建报表:对于初学者可以参考我前面的文章[Reporting Services 报表开发]— 总结 如图1: 图 1 二.选择 new_name文本框—>添加组—>选择行组中的父组.具 ...
- axis2开发webservice总结
需求环境:对接方公司提供wsdl文件,我方按照该wsdl文件开发服务端. 配置axis2开发环境,网上教程很多,不再啰嗦.环境搭好后执行wsdl2java -uri file:///C:/Users/ ...
- 安全测试chicklist
- 【整理总结】代码沉淀 - CefSharp - 比较流行的第三方内嵌浏览器组件
.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework web: https://github.com/ce ...
- tomcat 乱码问题
页面提交都是utf8编码进后台,但是后台入库有些中文数据是正常,有些是乱码,可以完全排除数据库层面的问题 比较一下正常和异常的http请求,一个是Get,一个是Post, 原因就找到了 tomcat4 ...
- Python- 解决PIP下载安装速度慢 让PIP源使用国内镜像，提升下载速度和安装成功率。
原文: https://www.cnblogs.com/microman/p/6107879.html 对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间. ...