canvas入門（五）

這一節主要給大家分享兩個曲線————二次貝塞爾曲線和三次貝塞爾曲線

二次貝塞爾曲線示例

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.quadraticCurveTo(100, 100, 200, 50);
  context.stroke();
  context.closePath();
}
</script>

運行結果如下

參數細解
context.moveTo(a, b); 繪製起點
context.quadraticCurveTo(c, d, e, f); 前兩個參數控制曲線的彎曲程度,c,d 後兩個參數控制曲線的終點e,f

演示網址推薦

blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

三次貝塞爾曲線示例

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.bezierCurveTo(100, 100, 150,0,200, 50);
  context.stroke();
  context.closePath();
}
</script>

運行結果如下

參數細解
context.moveTo(a, b); 繪製起點
context.bezierCurveTo(c, d, e, f ,g ,h); c,d控制第一次彎曲程度,e,f控制第二次彎曲程度,g,h終點

演示網址推薦

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

本節最後一個知識點，清空畫布clearRect
在上述代碼最後新添一行代碼context.clearRect(0,0,canvas.width,canvas.height);

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.bezierCurveTo(100, 100, 150,0,200, 50);
  context.stroke();
  context.closePath();
  context.clearRect(0,0,canvas.width,canvas.height); 
}
</script>

運行之後你就會發現畫布空空如也
參數細解
context.clearRect(a,b,c,d); a,b起點,c從起點開始向右寬度,d從起點開始向下高度;
既然有clearRect,那是不是自然有rect,這個留給大家自己去學習
最後給大家分享一個小細節,學習到的代碼中的moveTo其實可以換成lineTo,實現的效果與之前的一模一樣。
下一節將會爲大家分享一些canvas中的旋轉,偏移之類的效果