Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说
详细代码如下：
<!doctype html>
<html lang="en">
<head>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<meta charset="UTF-8">
<title>quadraticCurveTo Example</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var ctx = theCanvas.getContext("2d");
} var x1=350,y1 = 250,x2 = 440,y2 = 550,x = 400,y = 500;
var fan = 1,fan1 = 1;
function drawScreen() { ctx.clearRect(100,100,600,600);
ctx.beginPath();
ctx.strokeStyle="#000";
ctx.moveTo(300,300);
ctx.quadraticCurveTo(x1,y1,x,y);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
ctx.lineTo(x,y);
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();
if(x1 > 600) {
fan = -1;
} else if (x1 < 200) {
fan = 1;
}
if(y1 > 600) {
fan1 = -1;
} else if (y1 < 200) {
fan1 = 1;
}
x1 += fan;
y1 += fan1;
setTimeout(drawScreen,22);
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
context.quadraticCurveTo(cpx, cpy, x, y) 方法参数包含两个点，一个是(cpx,cpy)控制点，就是上图所示的90度角所在的那个点，为何叫控制点，说白了就是这一点控制曲线(Curve)的角度,你可以想象一下这个点前后左右各个方向移动 这个曲线的变化情况，如果你能想象出来，说明你理解了。（x,y）表示终点，就是上图三角最下面的点。那有人就问了 起点怎么没有地方定义，ok,这必须用到moveTo:ctx.moveTo(300,300); 意思从这个起点开始画弧线。 我们这里用到clearRect,每次画线之前都清除一下画布，重新绘画，这样配合setTimeout ，这个动画效果就出来了，从动画中就可以看出来，控制点的作用了。 bezierCurveTo :
context.bezierCurveTo(x1, y1, x2, y2, x, y)
(x1,y1)控制点1，(x2,y2)控制点2，(x,y)即为结束点，开始点在哪的，同样是用lineTo. 从上图可以看出两个控制点控制了曲线的细缓平滑，有强迫症的人似乎更能理解。
<!doctype html>
<html lang="en">
<head>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<meta charset="UTF-8">
<title>quadraticCurveTo Example</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var ctx = theCanvas.getContext("2d");
}
function drawScreen() {
var x1=450, //控制点1的x坐标
y1 = 300, //控制点1的y
x2 = 450, //控制点2的x
y2 = 500,//控制点2的y
x = 300, //终点x
y = 500;//终点y
ctx.moveTo(300,300);//起点
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//开始画辅助线
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 连接起点和控制点1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 连接终点和控制点2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 连接起点与终点（基线）
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
最近自己在学习canvas中，主要看的资料是HTML5 Canvas,Second Edition,有700多页，不知道有没有中文版，反正我是翻墙下载的，配合网络资料，学习心得会不断更新。
Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说的更多相关文章
- HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
- 【Canvas】绘制几何级数Geometric series曲线 y=1+1/2+1/4+1/8+1/16+1/32+1/64+....
相关资料:https://baike.baidu.com/item/%E5%87%A0%E4%BD%95%E7%BA%A7%E6%95%B0/112584?fr=aladdin 图线: 代码: < ...
- 【Canvas】勾画调和级数Harmonic series 曲线 y=1+1/2+1/3+1/4+1/5+1/6+1/7+1/8+....
相关资料:https://baike.baidu.com/item/%E8%B0%83%E5%92%8C%E7%BA%A7%E6%95%B0/8019971?fr=aladdin 调和级数(英语:Ha ...
- PHP利用GD库画曲线
效果: PHP代码 <?php Header('Content-type: image/png;Charset:utf-8'); //声明图片 $im = imagecreate(400,200 ...
- 1.1.3-学习Opencv与MFC混合编程之---画图工具 通过对话框进行工具的参数设置 画曲线 绘图校正
源代码:http://download.csdn.net/detail/nuptboyzhb/3961688 l 对话框 1.“插入”->“资源”->“对话框” 2.对话框属性如下: 双击 ...
- PHP《将画布(canvas)图像保存成本地图片的方法》
用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...
- 转载：将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...
- python的曲线平滑工具，及python画一条线中包含不同粗细不同颜色的画线方法
from scipy.signal import savgol_filter import matplotlib.pyplot as plt cc = savgol_filter(c, 99, 1) ...
- canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- Nagios+pnp4nagios+rrdtool 安装配置为nagios添加自定义插件(三)
nagios博大精深,可以以shell.perl等语句为nagios写插件,来满足自己监控的需要.本文写mysql中tps.qps的插件,并把收集到的结果以图形形式展现出来,这样输出的结果就有一定的要 ...
- 在centos上部署java WEB环境
题语:偷得浮生半日闲,趁着十一期间,好好的写写随笔来记录自己所学.所践和所得,不足之处,欢迎各位拍砖~~~ 工具:Xftp 5.Xshell 5 一.安装jdk 1. 使用Xftp 5把jdk-8u ...
- 全面认识Eclipse中JVM内存设置(转)
这里向大家描述一下Eclipse中如何进行JVM内存设置,JVM主要管理两种类型的内存:堆和非堆.简单来说堆就是Java代码可及的内存,是留给开发人员使用的:非堆就是JVM留给自己用的,所以方法区.J ...
- 【C语言探险】 第四课的第二部分：串
内容简单介绍 1.课程大纲 2.第二部分第四课: 字符串 3.第二部分第五课预告: 预处理 课程大纲 我们的课程分为四大部分,每个部分结束后都会有练习题,并会发布答案.还会带大家用C语言编写三个游戏. ...
- 算法战斗：给定一个号码与通配符问号W，问号代表一个随机数字。 给定的整数，得到X，和W它具有相同的长度。 问：多少整数协议W的形式和的比率X大？
如果说: 给定一个号码与通配符问号W,问号代表一个随机数字. 给定的整数,得到X,和W它具有相同的长度. 问:多少整数协议W的形式和的比率X大? 进格公式 数据的多组,两排各数据的,W,第二行是X.它 ...
- Java学习之路：详细解释Java解析XML四种方法
XML如今已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便. 对于XML本身的语法知识与技术细节,须要阅读相关的技术文献,这里面包含的内容有DO ...
- Quartz.NET学习系列
Quartz.NET它是一个开源的任务调度引擎,对于周期性任务,持久性任务提供了很好的支持,并且支持持久性.集群等功能. 这是什么对我来说Quartz.NET学习记录: 源代码下载http://yun ...
- C，C++中的static
在C和C++中,static都有两种基本的含义,并且这两种含义经常是互相有冲突的: 1) 在固定的地址上分配,也就是说对象是在一个特殊的静态数据区上创建的,而不是每次 函数调用时在堆栈上产生的.这也是 ...
- tb连续aaaaa123aaa自适应
在连续的字符串数字中,td不会自适应大小,需要加上样式 style="word-break : break-all; overflow:hidden; " <table> ...
- Android TextView里直接显示图片的三种方法
方法一:重写TextView的onDraw方法,也挺直观就是不太好控制显示完图片后再显示字体所占空间的位置关系.一般假设字体是在图片上重叠的推荐这样写.时间关系,这个不付源代码了. 方法二:利用Tex ...