问题描述
我一直试图使用 bezierCurveTo
找到类似高斯函数
> < canvas id =thisCanwidth =0pxheight =0pxstyle =border：1px solid＃d3d3d3; >
您的浏览器不支持HTML5 canvas标签。
< / canvas>
< script>
（function（）{
var
//使用其id获取对canvas元素
//的引用。
htmlCanvas = document.getElementById（'thisCan' ），
//在
// canvas元素上获取图形上下文以进行绘制。
ctx = htmlCanvas.getContext（'2d'）;
var width = 0;
var height = 0;
//开始收听调整大小事件和
//绘制画布。
initialize（）;
函数initialize（）
{
//将事件监听器注册到
//每次
//调整resizeCanvas（）函数时调整窗口大小。
window.addEventListener（'resize'，resizeCanvas，false）;
//第一次绘制画布边框。
resizeCanvas（）;
}
//显示自定义画布。
//在这种情况下，它是一个蓝色的5像素边框，
//随浏览器窗口一起调整。
函数重绘（）
{
ctx.beginPath（）;
ctx.moveTo（width / 2,0）;
ctx.bezierCurveTo（150,1 19,186,121,66,185）;
ctx.moveTo（width / 2 + width * 0.08,0）;
ctx.bezierCurveTo（344,119,344,121,504,185）;
ctx.stroke（）;
}
//每次DOM窗口调整事件触发时运行。
//重置画布尺寸以匹配窗口，
//然后相应地绘制新边框。
函数resizeCanvas（）
{
var contentElement = document.getElementsByClassName（content-box post）[0]
width = htmlCanvas.width =（contentElement.clientWidth * 0.75 ）
height = htmlCanvas.height =（contentElement.offsetWidth * 0.75 * 0.5）;
redraw（）;
}
}）（）;
< / script>
我打算在两者之间绘制很多曲线。 但如何基于 width 和 height 变量？？ p>
我需要使用width和height参数指定控制点，这样它就变成窗口大小不变。
有没有办法？
如果你想要一个指数曲线，不要使用贝塞尔曲线，它们是不同的函数。相反，只需绘制实际需要的功能，例如，您可以在其中定义高斯对象：
//高斯分布生成器
var Gaussian = function（mean，std）{
this.mean = mean;
this.std = std;
this.a = 1 / Math.sqrt（2 * Math.PI）;
};
Gaussian.prototype = {
addStd：function（v）{
this.std + = v;
}，
get：function（x）{
var f = this.a / this.std;
var p = -1/2;
var c =（x-this.mean）/this.std;
c * = c;
p * = c;
返回f * Math.pow（Math.E，p）;
}，
generateValues：function（start，end）{
var LUT = [];
var step =（Math.abs（start）+ Math.abs（end））/ 100;
for（var i = start; i< end; i + = step）{
LUT.push（this.get（i））;
}
返回LUT;
}
};
然后你可以给它一个绘图程序，以便它可以在你需要的间隔内绘制自己：
...
draw：function（ctx）{
var points = this.generateValues（ -10,10）;
var len = points.length;
ctx.strokeStyle =black;
ctx.beginPath（）;
var p0 = points [0];
ctx.moveTo（0，height - （height * p0））;
points.forEach（function（p，i）{
if（i === 0）{
return;
}
ctx.lineTo（width * i / len，height - （height * p））;
p0 = p;
}）;
ctx.stroke（）;
}
...
所以你建立你的价值数组间隔，然后通过连接点在画布上绘制它们。
I have been trying to draw gaussin-like function using bezierCurveTo
find the code below
<canvas id="thisCan" width="0px" height="0px" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
(function() {
var
// Obtain a reference to the canvas element
// using its id.
htmlCanvas = document.getElementById('thisCan'),
// Obtain a graphics context on the
// canvas element for drawing.
ctx = htmlCanvas.getContext('2d');
var width = 0;
var height = 0;
// Start listening to resize events and
// draw canvas.
initialize();
function initialize()
{
// Register an event listener to
// call the resizeCanvas() function each time
// the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas.
// In this case it's a blue, 5 pixel border that
// resizes along with the browser window.
function redraw()
{
ctx.beginPath();
ctx.moveTo(width/2, 0);
ctx.bezierCurveTo(150, 119, 186, 121, 66, 185);
ctx.moveTo(width/2 + width * 0.08 , 0);
ctx.bezierCurveTo(344, 119, 344, 121, 504, 185);
ctx.stroke();
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas()
{
var contentElement = document.getElementsByClassName("content-box post")[0]
width = htmlCanvas.width = (contentElement.clientWidth * 0.75)
height = htmlCanvas.height = (contentElement.offsetWidth*0.75 * 0.5);
redraw();
}
})();
</script>
I am planning to draw many curves in between as well. But how do I make it parametric, based on width and height variables?
I need to specify the control points using width and height parameters, so that it becomes window-size invariant.
Is there a way?
Don't use Bezier curves if you want an exponent curve, they're different functions. Instead, just plot the function you actually need, with something like http://jsbin.com/nubutodosu/edit?js,output, where you define a Gaussian object:
// Gaussian distribution generator
var Gaussian = function(mean, std) {
this.mean = mean;
this.std = std;
this.a = 1/Math.sqrt(2*Math.PI);
};
Gaussian.prototype = {
addStd: function(v) {
this.std += v;
},
get: function(x) {
var f = this.a / this.std;
var p = -1/2;
var c = (x-this.mean)/this.std;
c *= c;
p *= c;
return f * Math.pow(Math.E, p);
},
generateValues: function(start, end) {
var LUT = [];
var step = (Math.abs(start)+Math.abs(end)) / 100;
for(var i=start; i<end; i+=step) {
LUT.push(this.get(i));
}
return LUT;
}
};
And then you can give that a draw routine so that it can plot itself over the interval that you need:
...
draw: function(ctx) {
var points = this.generateValues(-10,10);
var len = points.length;
ctx.strokeStyle = "black";
ctx.beginPath();
var p0 = points[0];
ctx.moveTo(0, height - (height*p0));
points.forEach(function(p,i) {
if(i===0) {
return;
}
ctx.lineTo(width * i/len, height - (height*p));
p0 = p;
});
ctx.stroke();
}
...
So you build your array of values over the interval, then draw them on the canvas by "connecting the dots".
这篇关于html5使用bezierCurveTo绘制高斯函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！