因为需要使用到赛贝尔曲线的相关工具。去做些特效或者路径什么的 然后发现了一个工具同不错的 就是赛贝尔曲线工具 又因为感觉这个不错。于是我就....把他扒下来了。你们可以自行修改这个的相关参数调解canvas的宽与高活再右边添加不同选项。下载一个webStorm 那下面的复制粘贴一下 你就可以使用了 下面是代码
此代码进过了自己的 一些修改添加的。里面又有赛贝尔函数，也有使用说明 。大家只需要下载一个webStorm把这个页面。然后创建一个新的空工程，再创建一个html的页面。然后把下面的全部复制。放到刚刚创建好的html的页面上就可以了。具体如何创建可以webStrom的可以百度一下
因为是在之前的作者基础之上修改过了 翻译了一下。同时添加了原网址，与使用方法的介绍。与赛贝尔函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* CSS */
body
{
font-family: arial, helvetica, sans-serif;
font-size: 85%;
margin: 10px 15px;
color: #333;
background-color: #ddd;
}
h1
{
font-size: 1.6em;
font-weight: normal;
margin: 0 0 0.3em 0;
}
h2
{
font-size: 1.4em;
font-weight: normal;
margin: 1.5em 0 0 0;
}
p
{
margin: 1em 0;
}
#canvas
{
display: inline;
float: left;
margin: 0 10px 10px 0;
background-color: #fff;
/*width: 750px;*/
/*height: 1206px;*/
}
#code
{
display: block;
width: auto;
height: 100%;
font-family: monospace;
font-size: 1em;
padding: 2px 4px;
margin: 0;
color: #555;
background-color: #eee;
border: 1px solid #999;
overflow: auto;
}
</style>
</head>
<body>
<h1>赛贝尔曲线</h1>
<canvas id="canvas" width="750" height="1206" class="bezier"></canvas>
<pre id="code">code</pre>
<p>他演示展示了如何在画布元素上绘制B_zier曲线。拖动线条端点或控制点以更改曲线。</p>
<p>更多的内容请前往:<br />
<a href="http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/">如何使用塞北贝尔函数在canvas画出图形</a></p>
<p>又或者是这个:<br />
<a href="http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/">如何使用塞北贝尔函数在canvas画出图形</a></p>
<h2>Disclaimer (免责声明)</h2>
<p>代码是由 <a href="http://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a>.</p>
<p>代码可以在没有任何限制的情况下使用，但请不要期望24小时支持！请链接至sitepoint.com.</p>
<p>！！我是之前抓下来的网址 如果你认为这个页面很好使用，这边是之前官方版本的网页 <a href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html">请点击这里</a></a>跳转到原创作者的网页.</p>
<script>
/*
* Canvas curves example
*
* By Craig Buckler, http://twitter.com/craigbuckler
* of OptimalWorks.net http://optimalworks.net/
* for SitePoint.com http://sitepoint.com/
*
* Refer to:
* http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
* http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
*
* This code can be used without restriction.
*/
(function() {
var canvas, ctx, code, point, style, drag = null, dPoint;
// define initial points
function Init(quadratic) {
point = {
p1: { x:100, y:250 },
p2: { x:400, y:250 }
};
if (quadratic) {
point.cp1 = { x: 250, y: 100 };
}
else {
point.cp1 = { x: 150, y: 100 };
point.cp2 = { x: 350, y: 100 };
}
// default styles
style = {
curve: { width: 6, color: "#333" },
cpline: { width: 1, color: "#C00" },
point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
}
// line style defaults
ctx.lineCap = "round";
ctx.lineJoin = "round";
// event handlers
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
DrawCanvas();
}
// draw canvas
function DrawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// control lines
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
ctx.lineTo(point.cp1.x, point.cp1.y);
if (point.cp2) {
ctx.moveTo(point.p2.x, point.p2.y);
ctx.lineTo(point.cp2.x, point.cp2.y);
}
else {
ctx.lineTo(point.p2.x, point.p2.y);
}
ctx.stroke();
// curve
ctx.lineWidth = style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
if (point.cp2) {
ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
}
else {
ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
}
ctx.stroke();
// control points
for (var p in point) {
ctx.lineWidth = style.point.width;
ctx.strokeStyle = style.point.color;
ctx.fillStyle = style.point.fill;
ctx.beginPath();
ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
ctx.fill();
ctx.stroke();
}
ShowCode();
}
// show canvas code
function ShowCode() {
if (code) {
code.firstChild.nodeValue =
"他演示展示了如何在画布元素上绘制B_zier曲线。拖动线条端点或控制点以更改曲线。\n"+
"canvas = document.getElementById(\"canvas\");\n"+
"ctx = canvas.getContext(\"2d\")\n"+
"ctx.lineWidth = " + style.curve.width +
";\nctx.strokeStyle = \"" + style.curve.color +
"\";\nctx.beginPath();\n" +
"ctx.moveTo(" + point.p1.x + ", " + point.p1.y +");\n" +
(point.cp2 ?
"ctx.bezierCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.cp2.x+", "+point.cp2.y+", "+point.p2.x+", "+point.p2.y+");" :
"ctx.quadraticCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.p2.x+", "+point.p2.y+");"
) +
"ctx.stroke();"+
"\n"+
"\n起始点坐标：(" + point.p1.x + ", " + point.p1.y +")"+
"\n起始点的参数坐标("+point.cp1.x +","+point.cp1.y +")"+
"\n终点的参数坐标("+point.cp2.x +","+point.cp2.y +")"+
"\n终点的坐标("+point.p2.x +","+point.p2.y +")"+
"\n"+
"\n三次赛贝尔的公式 传入的是anchorpoints=([{起始点坐标},{起始点的参数坐标x},{终点的参数坐标},{终点的坐标}])"+
"\n三次赛贝尔的公式 格式是bser([{x,y},{x,y},{x,y},{x,y}],speed)"+
"\n 传入的是anchorpoints(第一个数组是起始点的xy也就是ctx.moveTo后面的数组,第二个数组就是第四个参数是ctx.bezierCurveTo中的数组参数,最后一个单独的参数是速度是多少)"+
"\n下面的是三次赛贝尔的公式 格式是bser([{" + point.p1.x + "," + point.p1.y +"},{"+point.cp1.x +","+point.cp1.y +"},{"+point.cp2.x +","+point.cp2.y +"},{"+point.p2.x +","+point.p2.y +"}],100)"+
"\n static bser(anchorpoints, pointsAmount) {\n" +
" let points = [];\n" +
" for (let i = 0; i < pointsAmount; i++) {\n" +
" let point = MultiPointBezier(anchorpoints, i / pointsAmount);\n" +
" points.push(point);\n" +
" }\n" +
" return points;\n" +
" function MultiPointBezier(points_, t) {//t贞数\n" +
" let len = points_.length;\n" +
" let x = 0, y = 0;\n" +
" let erxiangshi = function (start, end) {\n" +
" let cs = 1, bcs = 1;\n" +
" while (end > 0) {\n" +
" cs *= start;\n" +
" bcs *= end;\n" +
" start--;\n" +
" end--;\n" +
" }\n" +
" return (cs / bcs);\n" +
" };\n" +
" for (let i = 0; i < len; i++) {\n" +
" let point = points_[i];\n" +
" x +=/*Math.round()*/ point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//x弧度\n" +
" y +=/*Math.round()*/ point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//y弧度\n" +
" }\n" +
" return { e: x, f: y };\n" +
" }\n" +
" }"
;
}
}
// start dragging
function DragStart(e) {
e = MousePos(e);
var dx, dy;
for (var p in point) {
dx = point[p].x - e.x;
dy = point[p].y - e.y;
if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
drag = p;
dPoint = e;
canvas.style.cursor = "move";
return;
}
}
}
// dragging
function Dragging(e) {
if (drag) {
e = MousePos(e);
point[drag].x += e.x - dPoint.x;
point[drag].y += e.y - dPoint.y;
dPoint = e;
DrawCanvas();
}
}
// end dragging
function DragEnd(e) {
drag = null;
canvas.style.cursor = "default";
DrawCanvas();
}
// event parser
function MousePos(event) {
event = (event ? event : window.event);
return {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
}
// start
canvas = document.getElementById("canvas");
code = document.getElementById("code");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
Init(canvas.className == "quadratic");
}
})();
// static bser(anchorpoints, pointsAmount) {
// let points = [];
// for (let i = 0; i < pointsAmount; i++) {
// let point = MultiPointBezier(anchorpoints, i / pointsAmount);
// points.push(point);
// }
// return points;
// function MultiPointBezier(points_, t) {//t贞数
// let len = points_.length;
// let x = 0, y = 0;
// let erxiangshi = function (start, end) {
// let cs = 1, bcs = 1;
// while (end > 0) {
// cs *= start;
// bcs *= end;
// start--;
// end--;
// }
// return (cs / bcs);
// };
// for (let i = 0; i < len; i++) {
// let point = points_[i];
// x +=/*Math.round()*/ point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//x弧度
// y +=/*Math.round()*/ point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));//y弧度
// }
// return { e: x, f: y };
// }
// }
</script>
</body>
</html>
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
