1、二次贝塞尔曲线介绍
quadraticCurveTo(cpx,cpy,x,y)
cpx,cpy表示控制点的坐标;
x,y表示终点坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
2、二次贝赛尔曲线实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can6.getContext('2d');
//绘制起始点、控制点、终点
cxt.beginPath();
cxt.moveTo(20,170);
cxt.lineTo(130,40);
cxt.lineTo(180,150);
cxt.stroke();
cxt.strokeStyle = "rgba(255,0,0,1)";
//绘制2次贝塞尔曲线
cxt.beginPath();
cxt.moveTo(20,170);
cxt.quadraticCurveTo(130,40,180,150);
cxt.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
代码显示的效果:
3、三次贝赛尔曲线
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y表示第一个控制点的坐标;
cp2x,cp2y表示第二个控制点的坐标;
x,y表示终点的坐标;
数学公式表示如下:
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。
4、三次贝赛尔曲线实例(1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can.getContext('2d');
//绘制起始点、控制点、终点
cxt.beginPath();
cxt.moveTo(25,175);
cxt.lineTo(60,80);
cxt.lineTo(150,30);
cxt.lineTo(170,150);
cxt.stroke();
//绘制3次贝塞尔曲线
cxt.strokeStyle = "rgba(200,0,0,1)";
cxt.beginPath();
cxt.moveTo(25,175);
cxt.bezierCurveTo(60,80,150,30,170,150);
cxt.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
代码显示的效果:
5、三次贝赛尔曲线实例(2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can.getContext('2d');
//绘制起始点、控制点、终点
cxt.beginPath();
cxt.moveTo(30,180);
cxt.lineTo(70,30);
cxt.lineTo(130,170);
cxt.lineTo(180,50);
cxt.stroke();
cxt.strokeStyle = "rgba(200,0,0,1)";
//绘制3次贝塞尔曲线
cxt.beginPath();
cxt.moveTo(30,180);
cxt.bezierCurveTo(70,30,130,170,180,50);
cxt.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
代码显示的效果:
- 大小: 17.6 KB
- 大小: 150.3 KB
- 大小: 24.5 KB
- 大小: 211.2 KB
- 大小: 4.1 KB
- 大小: 4.5 KB
- 大小: 4.9 KB
分享到:
相关推荐
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas-1.0.0-rc.4版本
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas绘制基础图形(canvas 气泡框 网格线 三角形 圆角矩形 箭头)1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
html5 canvas 贝赛尔曲线,主要内容是帮助想研究贝赛尔曲线的同学提供这方面的文档
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
Canvas,Delphi中的画布,本压缩包中包含了四个特效,我也是从网上找的教程,但教程中有点小错误,也可能是有的站长复制粘贴时不小心哈,我研究了下教程后就直接做成了程序了。喜欢的朋友拿去。。。
asp-net-mvc-canvasjs-chart-samples,.NET的MVC图表组件
Canvas的实际使用--自定义搜索效果 资源博客地址:http://blog.csdn.net/wangwo1991/article/details/77940721
在canvas中当在canvas上写width和height时为canvas的实际画板大小,默认情况下width为300px,height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例: ...
Android—BitMap与Canvas学习笔记
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
Canvas:最基本的面板。仅支持用显示坐标定位元素。可以通过Left、Top、Right、Bottom附加属性在Canvas中定位元素,通过设置Left和Right属性值表示元素最靠近的那条边,应该与Canvas的左边缘或右边缘保持一个固定的...
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ,您可以从中将它们复制到Web服务器提供的文件夹中。 接下来,在HTML标记中包含缩小JavaScript Canvas to Blob脚本: < ...
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
具有Discord表情符号支持的node-canvas-with-twemoji的分支。 这是一个能够在节点画布上绘制表情符号的模块。 安装 $ npm install node-canvas-with-twemoji-and-discord-emoji 快速范例 const { createCanvas } = ...