贝塞尔曲线2

最新推荐文章于 2023-08-17 10:59:53 发布
最新推荐文章于 2023-08-17 10:59:53 发布
阅读量236 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52148593
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.wrap{

position: relative;

margin: 50px;

}

#red{

width: 20px;

height: 20px;

background-color: deeppink;

border: 1px solid lightgray;

border-radius: 50%;

position: absolute;

top: 0;

left: 10px;

}

#blue{

width: 20px;

height: 20px;

background-color: deepskyblue;

border: 1px solid lightgray;

border-radius: 50%;

position: absolute;

top: 470px;

left: 460px;

}

#be{

font-size: 30px;

position: absolute;

top: 0;

left: 550px;

}

.r{

color: #FF0088;

}

.b{

color: #00AABB;

}

</style>

</head>


<body>

<div class="wrap">

<canvas id="canvas" width="1000" height="1000">浏览器不支持</canvas>

<div id="red"></div>

<div id="blue"></div>

<div id="be">Cubic-bezier(

<span class="r">0</span>,

<span class="r">1</span>,

<span class="b">1</span>,

<span class="b">0</span>

)</div>

</div>


<script type="text/javascript">

var red = document.getElementById("red");

var blue = document.getElementById("blue");

var canvas = document.getElementById("canvas");

var redMove = document.querySelectorAll(".r");

var blueMove = document.querySelectorAll(".b");

var ctx = canvas.getContext("2d");

function create() {

// x,y框

ctx.beginPath();

ctx.lineWidth = "1";

ctx.strokeStyle = "black";

ctx.moveTo(20, 0);

ctx.lineTo(20, 480);

ctx.lineTo(480, 480);

ctx.stroke();

ctx.closePath();

// 灰线

ctx.beginPath();

ctx.lineWidth = "2";

ctx.strokeStyle = "#ccc";

ctx.lineWidth = "10";

ctx.moveTo(20, 480);

ctx.lineTo(480, 20);

ctx.stroke();

ctx.closePath();

// 圆

ctx.beginPath();

ctx.strokeStyle = "#ccc";

ctx.lineWidth = "2";

ctx.fillStyle = "#fff";

ctx.arc(20, 480, 10, 0, Math.PI * 2, true);

ctx.stroke();

ctx.fill();

ctx.beginPath();

ctx.arc(480, 20, 10, 0, Math.PI * 2, true);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

create();

function drawLine(x,y,m,n){

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.lineWidth = "2"

ctx.moveTo(x,y);

ctx.lineTo(m,n);

ctx.stroke();

}

// 红球控制

var rx = 0;

var ry = 0;

red.onmousedown = function(e){

var e = e || window.event;

var eX = e.clientX - red.offsetLeft;

var eY = e.clientY - red.offsetTop;

document.onmousemove = function(ev){

var ev = ev || window.event;

var evX = ev.clientX - eX;

var evY = ev.clientY - eY;

rx = evX;

ry = evY;

redMove[0].innerHTML = (rx / 480).toFixed(2);

redMove[1].innerHTML = ((ry + 480) / 480).toFixed(2);

red.style.left = evX - red.offsetWidth /2 + "px" ;

red.style.top = evY -  red.offsetHeight /2 + "px";

ctx.clearRect(0,0,1000,1000);

create();

drawLine(20,480,evX,evY);

ctx.closePath();

if (bx !=0 || by != 0) {

ctx.beginPath();

drawLine(480,20,bx,by);

ctx.closePath();

}

ctx.beginPath();

ctx.lineWidth = "6";

ctx.moveTo(20,480);

ctx.bezierCurveTo(rx,ry,bx,by,480,20);

ctx.stroke();

ctx.closePath();

}

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

}

}

// 蓝球控制

var bx = 0;

var by = 0;

blue.onmousedown = function(e){

var e = e || window.event;

var eX = e.clientX - blue.offsetLeft;

var eY = e.clientY - blue.offsetTop;

document.onmousemove = function(ev){

var ev = ev || window.event;

var evX = ev.clientX - eX;

var evY = ev.clientY - eY;

bx = evX;

by = evY;

// 保留两位小数

blueMove[0].innerHTML = (bx / 480).toFixed(2);

blueMove[1].innerHTML = ((480 - by) / 480).toFixed(2);

blue.style.left = evX - blue.offsetWidth /2 + "px" ;

blue.style.top = evY -  blue.offsetHeight /2+"px";

ctx.clearRect(0,0,1000,1000);

create();

ctx.beginPath();

drawLine(480,20,evX,evY);

ctx.closePath();

if (rx !=0 || ry!= 0) {

ctx.beginPath();

drawLine(20,480,rx,ry);

ctx.closePath();

}

ctx.beginPath();

ctx.lineWidth = "8";

ctx.moveTo(20,480);

ctx.bezierCurveTo(rx,ry,bx,by,480,20);

ctx.stroke();

ctx.closePath();

}

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

}

}

</script>

</body>


</html>

Vivian_shuang
关注
专栏目录
贝塞尔曲线介绍及一阶、二阶推导
唯一的信仰
05-25 1万+
简介说明贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，当时主要用于汽车主体设计。　　通过比例进行不断地取点，点不断地汇成一条平滑的曲线。 　　具体点击请看贝塞尔曲线扫盲。推导很多推导过程，不好打出来，就直接上手展示我的艺术字了哈哈，丑不能拒。一阶贝塞尔曲线推导二阶贝塞尔曲线推导总结目前直推到了前两阶，还有很多知...
java贝塞尔曲线_贝塞尔曲线学习
weixin_28683689的博客
02-12 987
贝塞尔曲线学习1.贝塞尔曲线以下公式中：B(t)为t时间下 点的坐标；P0为起点,Pn为终点,Pi为控制点一阶贝塞尔曲线(线段)：一阶贝塞尔曲线公式一阶贝塞尔曲线演示意义：由 P0 至 P1 的连续点， 描述的一条线段二阶贝塞尔曲线(抛物线)：二阶贝塞尔曲线公式二阶贝塞尔曲线演示原理：由 P0 至 P1 的连续点 Q0，描述一条线段。由 P1 至 P2 的连续点 Q1，描述一条线段。 ...
贝斯曲线_频响曲线你知道“瀑布图”到底反映了什么吗？
weixin_30542979的博客
01-12 1040
∧ 更多内容推荐 请关注为星标 □广播科技要了解频响曲线，首先我们要知道什么是频响。频响是频率响应的简称，英文名称是Frequency Response，一般是用来描诉仪器对于不同频率信号处理能力的差异。“频”指“频率”，频率震动越高，音调越高，就如声音表现中的“音调”；“响”则可以看作是扬声器系统对输入电信号中“频”转换成声能的响应。“频响曲线”就是...
贝塞尔曲线 总结
热门推荐
PlayBoy's 部落格
03-21 3万+
转载请注明出处：http://blog.csdn.net/tianhai110 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用
html5贝塞尔曲线,Canvas学习：贝塞尔曲线
weixin_39663593的博客
06-18 680
在绘制圆和圆弧一节中，了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线，但很多时候，仅这两个方法还不能满足我们实际的需求，特别是绘制复杂的曲线。不过值得庆幸的是，在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线，在Canvas中提供了两个独立的方法：quadraticCurveTo()和bezierCurveTo()方法。这两个方法...
android贝塞尔曲线表,Android 贝塞尔曲线 折线图
weixin_33846982的博客
05-31 296
1、贝塞尔曲线：http://baike.baidu.com/view/60154.htm，在这里理解什么是贝塞尔曲线2、直接上图：3、100多行代码就可以画出贝塞尔曲线，直接上代码package com.example.bezier;import java.util.ArrayList;import java.util.List;import android.app.Activity;impor...
浅谈贝塞尔曲线
子墨博客
08-05 3668
浅谈贝塞尔曲线 前段时间做了一个手写板功能的东西，其中手写部分用二次贝塞尔曲线完成，今天就来总结一下贝塞尔曲线在Android中的应用，先简单介绍各阶贝塞尔曲线的原理，然后实现通过贝塞尔曲线实现波浪线功能，感兴趣的同学继续看下去吧！ 概念 在数学的数值分析领域中，贝塞尔曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝兹曲面...
贝塞尔曲线打断生成两个贝塞尔曲线
小灰灰的博客
10-28 1087
问题：如何将一个三阶贝塞尔曲线打断生成两个三阶贝塞尔曲线，生成的两条贝塞尔曲线与原来的贝塞尔曲线重合？ 输入：一条贝塞尔曲线的四个控制点P1,C1,C2,P2,和一个打断点E(E在曲线上) 输出：两条贝塞尔曲线: P1,F,I,E E,J,H,P2 解决大致分为两步 第一步：求出E点对应的贝塞尔曲线的参数e 第二步：根据e计算出四个控制点F,I,J,H 依次多个点打断，红色线表示原始贝塞尔，蓝色线是打断的两个贝塞尔曲线，效果如下：蓝色线和红色线基本重合。 原理解析: 如图的红色曲线就是原始贝塞尔曲线，加入
贝塞尔曲线（Bezier Curve）
王王王渣渣的博客
04-21 1万+
曲线和曲面 在生活中存在着各种各样光滑的曲线或曲面，例如汽车的表面，钢珠球等。 在建模的时候，我们通常使用很多的小三角形来逼近这样的曲面，因此放大了看，就会发现这些面其实是凹凸不平的。但是实际生活中，例如我身边的杯子，无论怎么看它都是一个光滑的表面。 那么我们应该怎么表达这些光滑的曲线或曲面呢？我们先从曲线入手，看看它的几种表达方式。 曲线的显示表达 学过函数我们知道，画出来的图其实就是一条曲线，如下： 二维空间中，曲线的显示表示是以自变量来表达因变量的值，例如在xy空间中，可...
使用贝塞尔曲线算法制作曲线
最新发布
记录
08-17 167
使用两个点绘制。
bezier曲线平滑C语言代码-贝塞尔曲线C语言实现-bezier曲线平滑-曲线拟合-贝塞尔曲线
04-29
这是一份C语言版本的bezier曲线（贝塞尔曲线）绘制代码，实现了二次和三次bezier曲线的绘制，可用于一系列给定的离散点的曲线平滑。此代码封装成函数，可以直接调用。脚本里边有参数和代码的注释，可供使用者学习和...
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
09-27
【贝塞尔曲线简介】 贝塞尔曲线是一种在二维图形学中广泛应用的参数曲线，由法国工程师皮埃尔·贝塞尔在1962年提出。它通过控制点来定义曲线的形状，具有平滑、连续的特性，使得在设计中能够灵活地创建各种曲线形态...
EXCELVBA贝塞尔曲线及插值_贝塞尔平滑_EXCELVBA贝塞尔曲线及插值_excelvba插值_
10-03
最常见的是一阶贝塞尔曲线（线段），二阶贝塞尔曲线（三次方贝塞尔曲线）和三阶贝塞尔曲线（四次方贝塞尔曲线）。在VBA中，可以通过数学公式来计算曲线上的任意点位置。 二阶贝塞尔曲线的公式如下： B(t) = (1 - t)...
VC++三次样条插值和贝塞尔曲线实例程序.zip_VC++ 三次样条_vc 贝塞尔曲线_三次样条曲线_曲线插值_贝塞尔曲线
09-23
本篇文章将深入探讨两个关键概念：三次样条插值和贝塞尔曲线，以及它们在VC++环境中的实现。我们将通过分析标题和描述提供的信息，结合标签中的关键词，来详细阐述这两个概念及其在实际编程中的应用。 首先，我们来...
HTML实现贝塞尔曲线
12-23
路径数据由一系列命令和参数组成，其中`C`（对于三次贝塞尔曲线）或`Q`（对于二次贝塞尔曲线）命令用于定义控制点和结束点。 例如，一个简单的二次贝塞尔曲线可以这样表示： ```javascript var path = document....
打飞机html + js + canvas
Vivian_shuang的博客
08-09 2710
loading.js文件 // 三个参数： // 1. 所有要加载的图片对象 // 2.加载进度函数 // 3.加载完成函数 function loading(imgsObj, handleObj) { // 遍历对象，得到对象中属性的个数，即有多少张图片 var count = 0; var currentIndex = 0; for(prop in imgsObj)
canvas视频处理
Vivian_shuang的博客
08-09 2589
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> video src="videoviewdemo.mp4" autoplay="" id="video" loop="">你的浏览器不支持视频video> canvas id="canvas" width=
canvas图像叠加
Vivian_shuang的博客
08-09 1632
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
飞翔的小鸟
Vivian_shuang的博客
08-09 1451
DOCTYPE html> html> head>     title>Flappy Birdtitle>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     script type="text/javascript">         // Edit by xingoo    
使用贝塞尔曲线生成图形
"这篇文章主要介绍了如何理解和应用贝塞尔曲线，以及如何获取贝塞尔曲线的控制点。通过示例代码展示了如何在GIS环境中创建一条由多个线段组成的多边形，并探讨了将数组转换为贝塞尔曲线的方法。" 贝塞尔曲线是一种...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值