标签：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas1</title><script>function draw(id){var canvas = document.getElementById(id);if(canvas == null){return false;}var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,600,700);for(var i = 0;i<=10;i++){context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle = "rgba(255,0,0,0.25)";context.fill();}}</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="600px" height="700px"></canvas></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas2</title><script>//var k=1;function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,300,400);var dx = 150;var dy = 150;var s = 100;context.beginPath();context.fillStyle = "rgb(100,255,100)";context.strokeStyle = "rgb(0,0,100)";//图形边框的样式（颜色）var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 15 *11;for(var i = 0;i<3;i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();context.fill();context.stroke();// k++;}// function init(){// setInterval(function(){draw(‘canvas‘)},1000);// }</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="300" height="400"></canvas></body></html>
**CanvasRenderingContext2D**.bezierCurveTo() 是
Canvas 2D API 绘制三次贝赛尔曲线路径的方法。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x和cp1y第一个控制点
cp2x和cp2y第二个控制点
x和y线的终点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas3</title><script>function draw(id){var canvas = document.getElementById("canvas");if(canvas == null){return false;}var context = canvas.getContext("2d");context.fillStyle="#eeeeef";context.fillRect(0,0,300,400);var dx = 150;var dy = 150;var s = 100;context.beginPath();context.fillStyle = "rgb(100,255,100)";var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI /15 *11;context.moveTo(dx,dy);for(var i = 0;i<30;i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);}context.closePath();context.fill();context.stroke();}</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="300px" height="400px"></canvas></body></html>
标签：
原文地址：http://blog.csdn.net/tangxiaolang101/article/details/51360192
