CSS Code復(fù)制內(nèi)容到剪貼板
- <canvas id="canvas" width="200" height="200"></canvas>
- <script>
- var g=canvas.getContext("2d");
- //普通的直線
- g.beginPath();
- g.strokeStyle="#CCC";
- g.moveTo(0,0);
- g.lineTo(200,0);
- g.lineTo(0,200);
- g.lineTo(200,200);
- g.stroke();
- //貝茲曲線
- g.beginPath();
- g.strokeStyle="#F00";
- g.moveTo(0,0);
- g.bezierCurveTo(200,0, 0,200, 200,200);
- g.stroke();
- </script>
CSS Code復(fù)制內(nèi)容到剪貼板
- g.beginPath();
- g.strokeStyle="#00F";
- g.moveTo(100,0);
- g.bezierCurveTo(-100,200, 300,200, 100,0);
- g.stroke();
把三次貝茲曲線的開始位置和結(jié)束位置設(shè)置到同一點(diǎn)上就可以畫出閉曲線。因?yàn)樨惼澢€的插值方向不是按照坐標(biāo)軸走的,所以可以繪制出閉曲線。如果想讓多項(xiàng)式插值繪制出閉曲線我們就得轉(zhuǎn)換參數(shù),使用極坐標(biāo)系來完成。
我使用的例子都是三次貝茲曲線。其實(shí)二次的也一樣,只是少了個(gè)中間點(diǎn)就畫不出我想要的東西了。我就不再啰嗦一大堆了,這篇就這樣吧= =。。