HTML5之Canvas画圆形

1、设计源码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画圆形</title>

</head>
<body onLoad="drawFour('canvas')">
   <canvas id="canvas" width="1200" height="560"/>
   <script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var context=canvas.getContext("2d");
		context.fillStyle="#0000ff";
		context.beginPath();
		context.arc(600,300,200,0,Math.PI*2,true);
		context.closePath();
		context.fill();
	</script>
</body>

2、设计结果

3、分析说明

（1）创建路径

context.beginPath();

（2）创建圆形路径

context.arc(600,300,200,0,Math.PI*2,true);

第一个参数x：起点横坐标

第二个参数y：起点纵坐标

第三个参数radius：圆的半径

第四个参数startAngle：开始角度

第五个参数endAngle：结束角度

第六个参数anticlockwise：是否按照顺时针方向进行绘制

（3）关闭路径

context.closePath();

（4）设定绘制样式

context.fillStyle="#0000ff";

context.fill();

HTML5之Canvas画圆形的更多相关文章

  1. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  2. Canvas画圆形

    转载:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#圆弧 function d ...

  3. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 canvas绘制圆形印章，以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. （转）浅谈HTML5与css3画饼图！

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  9. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. Hadoop学习笔记五

    一.uber(u:ber)模式 MapReduce以Uber模式运行时,所有的map,reduce任务都在一个jvm中运行,对于小的mapreduce任务,uber模式的运行将更为高效. uber模式 ...

  2. webrtc初探之一对一的连接过程（一）

    说明,我研究的是muan-khan的一个github项目,针对的是chrome对chrome,也就是pc对pc的一对一,一对多通话,感兴趣的可以继续往下看. github地址:https://gith ...

  3. [CJOJ2410]数列操作d

    [CJOJ2410]数列操作d 标签: 线段树 题解 没时间写题了,我来嘴巴AC吧. 注意区间加的这个值不是 确定的,随着元素位置的变化而改变. 只需要能维护这个东西剩下的就很好做了. 那么\(x*( ...

  4. [APIO2015]雅加达的摩天楼

    Description 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼外,雅加达市没有其他摩天楼. 有 M 只叫做 " ...

  5. CSS中可以继承和不可继承的常见属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  6. 应用负载均衡之LVS(三)：使用ipvsadm以及详细分析VS/DR模式

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. spring，property not found on type

    刚开始学spring mvc ,遇到这个报错. jsp页面 user 实体类 public class User { private String name; private int age; pri ...

  8. [转载]LVS+Keepalived之三大模式

    LVS + Keepalived之三大模式 ============================================================================== ...

  9. C语言链表的建立、插入和删除

    先看下向链表中插入节点 下面这个是删除链表节点

  10. 使用Socket对序列化数据进行传输(基于C#)

    客户端代码 [Serializable] // 表示该类可以被序列化 class Person{ public string name; public void HI() { Debug.Log(na ...