HTML5 Canvas实战
2.2 绘制圆形
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

虽然HTML5的画布API未提供直接绘制圆形的方法,但我们一定可以通过绘制一个完全闭合的圆弧来创建这样一个方法。

绘制圆弧
图1-3 绘制圆弧

绘制步骤

按照以下步骤,在画布的中央绘制一个圆:

1. 定义2D画布上下文:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 使用arc()方法创建一个圆,通过fillStyle属性设置填充颜色,并使用fill()方法填充图形。

  context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false);
  context.fillStyle = "#8ED6FF"; 
  context.fill();
  context.lineWidth   =  5;
  context.strokeStyle = "black"; 
  context.stroke();
};

3. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

在第1章曾经介绍过,我们可以使用arc()方法创建一个圆弧,该方法绘制由起始角度和结束角度定义的圆的一部分。然而,如果我们定义的起始角度和结束角度之间的差值为360°(2π),我们将绘制出一个完整的圆。

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

相关参考

  • 使用循环创建图案:绘制齿轮
  • 第4章 把圆变为椭圆
  • 第5章 摆钟
  • 第5章 模拟粒子物理学
  • 第5章 动画时钟
  • 第6章 检测区域事件
  • 第7章 创建饼图

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验