1

科目ごとの目標。

コードスニップ:

var canvas= document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');   
canvas.width= 520;
canvas.height= 405;
ctx.font = "15pt Verdana";
ctx.lineWidth = 1;

// text 1
ctx.fillText("me and my dog puddie", 210, 90);  
// text 2
ctx.fillText("you and many many crazy nuts", 210, 130); 
// draw a quadratic bezier curved line between the these 2 text blocks
ctx.strokeStyle = "rgb(65,60,50)";
ctx.beginPath();
ctx.moveTo(210,100);
ctx.bezierCurve(230,250,130,160,160,100);
ctx.stroke();

/* outcome:
no line were drawn between these two text objects
*/

二次曲線についての理解が非常に限られている

4

2 に答える 2

3

quadraticCurveTo二次曲線に使用する必要がありますbezierCurveTo。三次曲線に使用します。

ctx.beginPath();
ctx.moveTo(210,100); // move to the start
ctx.quadraticCurveTo(230, 130, 160, 100); // draw quadractic curve
ctx.stroke();

Canvasチュートリアルのベジェ曲線と2次曲線を参照してください。

于 2011-07-23T17:15:00.057 に答える
3

行を変更する

ctx.bezierCurve(230,250,130,160,160,100);

に

ctx.bezierCurveTo(230,250,130,160,160,100);

そして、あなたは行く準備ができているはずです。

于 2010-07-22T01:45:59.583 に答える