canvas（下）

语法

• context.arc(x,y,r,sAngle,eAngle,counterclockwise);
• 请把起始角设置为 0，结束角设置为 2*Math.PI。
  

beginPath()

• beginPath() 方法开始一条路径，或重置当前的路径。
• 使用beginPath()来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。
• 使用 stroke() 方法在画布上绘制确切的路径。

曲线之arcTo

二次贝塞尔曲线 quadraticCurveTo()

三次贝塞尔曲线 bezierCurveTo()

效果：

Canvas - 渐变

• 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
• 有两种不同的方式来设置Canvas渐变：
  createLinearGradient(x,y,x1,y1) - 创建线条渐变
  createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
• 当我们使用渐变对象，必须使用两种或两种以上的颜色。

createLinearGradient()

• createLinearGradient() 方法创建线性的渐变对象
  渐变可用于填充矩形、圆形、线条、文本等等。
  语法：context.createLinearGradient(x0,y0,x1,y1);
  

createRadialGradient()

• createRadialGradient() 方法创建放射状/圆形渐变对象。
• 渐变可用于填充矩形、圆形、线条、文本等等。
• 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
  
  canvas上一篇