Context.beginPath();
Context.arc(x,y,radius,startAngle,endAngle,anticlockwise);(for循环圆心、半径)
Context.closePath();
Context.fillStyle=&rgba(255,0,0,0.25)&
Context.fill()
ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)
&meta charset="UTF-8"&
&title&圆-椭圆&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&canvas id="canvas" width="500" height="500"&&/canvas&
&script type="text/javascript"&
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");
context.fillStyle = "#ededed";
context.fillRect(0, 0, 500, 500);
//画圆第一个
context.beginPath(); //开始圆
context.arc(100, 400, 50, 0, 2 * Math.PI, true); //50半径,Math.PI圆的&,true顺时针
context.closePath(); // 关闭圆，然后回到起点
context.fillStyle = "rgba(255,0,0,0.5)"; //颜色，0.5透明度
context.fill(); //填充这个圆
for(var i = 0; i & 10; i++) {
context.beginPath(); //开始圆
context.arc(i*30, i*30, i*10, 0, 2 * Math.PI, true); //50半径,Math.PI圆的&,true顺时针
context.closePath(); // 关闭圆，然后回到起点
context.fillStyle = "rgba(255,0,0,0.5)"; //颜色
context.fill(); //填充这个圆
context.beginPath();
context.ellipse(400, 100, 20, 40, 0.5, 0, 2*Math.PI, true);//radiusX:x方向上半径,radiusY：x方向上半径,0.5:rotation：旋转角度
context.closePath();
context.fillStyle = "#06e";
context.fill();
阅读(...) 评论()HTML5 canvas clearRect() 方法Canvas练习及学习笔记第二篇
首先，以下还是我学习了Canvas基础后的一些小练习，源代码大家可以访问我的Github:&
&（放大镜）鼠标左键 &&
&缩放图像 &
星星动画闪烁
炫酷计时动画效果&
推荐MOOC 教程 &
1.&&（一系列教程 讲得很好 有条理）
2.（星星闪烁教程）
以下是我的学习笔记，不算是教程，讲得不全面，是一些注意事项，更多是为了自己忘了的时候可以回来看看，希望说得不好或有错的，还望各位指教。
上一篇讲了绘制线条，矩形，渐变，图形变化以及设置各种属性，这篇将涉及绘制园，曲线的arc()以及arcTo()方法。
圆和曲线的绘制
　　1、arc()
　　　　arc()是HTML5&canvas的一个API函数，作用是“创建弧/曲线（用于创建圆形或部分圆）”。
　　　　语法： context.arc(x,y,r,startAngle,endAngle,counterclockwise)
　　　　参数值：
startAngle
起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
结束角，以弧度计。
counterclockwise
可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
　　　　注意：
　　　　　　　1、无论是顺时针还是逆时针，默认角度位置都如图1-1所示，不改变。
　　　　　　　2、角度为弧度制。
　　　　　实例：
　　　　　　
1 var CANVASWIDTH = 800;
2 var CANVASHEIGHT = 600;
4 var canvas = document.getElementById("canvas");
5 var context = canvas.getContext("2d");
7 canvas.width = CANVASWIDTH;
8 canvas.height = CANVASHEIGHT;
<span style="color: # context.beginPath();
<span style="color: # context.arc(400,300,200,0,2*Math.PI);
<span style="color: # context.stroke();
　　　　　　当然也可以用arc()来绘制曲线，只需改一改起始角和终止角就好了。
　　　　　　代码：
1 var CANVASWIDTH = 800;
2 var CANVASHEIGHT = 600;
5 var canvas = document.getElementById("canvas");
6 var context = canvas.getContext("2d");
8 canvas.width = CANVASWIDTH;
9 canvas.height = CANVASHEIGHT;
<span style="color: #
<span style="color: #
<span style="color: # context.beginPath();
<span style="color: # context.arc(400,300,200,0,Math.PI);　　　　　　//改了终止角为PI
<span style="color: # context.stroke();
　　2、arcto()
　　　　arcTo()方法还是和arc()不一样的，敲一敲代码就知道啦。arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
　　　　　语法：arcTo(x1,y1,x2,y2,radius)
　　　　　参数值：
　　　　　　
端点 1x坐标
端点1 y坐标
端点2 x坐标
端点2 y坐标
　　　　　　　　arcTo()方法将利用当前端点(x0,y0)、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。　　
　　　　　　实例：
　　　　　　
var CANVASWIDTH = 800;
var CANVASHEIGHT = 600;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = CANVASWIDTH;
canvas.height = CANVASHEIGHT;
context.lineWidth=5;
context.beginPath();
context.moveTo(200,200);
context.lineTo(600,200);
context.lineTo(600,600);
context.strokeStyle="#000"
context.stroke();　　　　　　//绘制辅助线
context.beginPath();
context.moveTo(200,200);
context.arcTo(600,200,600,600,300);
context.strokeStyle="red"
context.stroke();　　　　　　//绘制曲线
　　　　　　　　注意看清楚辅助线会曲线，我们可以看到，arcto()绘制的曲线终点不是所定义的（600,600），而是从起点(200,200)一直到与辅助线相切的坐标点就停止了。而若参数半径比较大，会出现什么情况呢？
　　　　实例：
　　　　　　代码：
var CANVASWIDTH = 800;
var CANVASHEIGHT = 600;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = CANVASWIDTH;
canvas.height = CANVASHEIGHT;
context.lineWidth=5;
context.beginPath();
context.moveTo(200,200);
context.lineTo(600,200);
context.lineTo(600,600);
context.strokeStyle="#000"
context.stroke();
context.beginPath();
context.moveTo(200,200);
context.arcTo(600,200,600,600,600);　　　　　　//就改了一个参数 将半径设置为600
context.strokeStyle="red"
context.stroke();
　　　　　　　　　　
　　　　　　　　可以看到，起点还是(200,200)，但还未与辅助线相切就停止了。
　　　　　　　　熟能生巧，多敲敲几遍代码，就能“摸清楚它的底细”了。
　　　　　　　　本人前端小菜鸟，有什么说的不对的，还望各位包涵哈~
阅读(...) 评论()没有更多推荐了，
不良信息举报
举报内容：
Html5 Canvas初探学习笔记(4) -清除屏幕
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！HTML 5 Canvas
HTML 5 Canvas
canvas 元素用于在网页上绘制图形。
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
&canvas id=&myCanvas& width=&200& height=&100&&&/canvas&
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
&script type=&text/javascript&&
var c=document.getElementById(&myCanvas&);
var cxt=c.getContext(&2d&);
cxt.fillStyle=&#FF0000&;
cxt.fillRect(0,0,150,75);
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById(&myCanvas&);
然后，创建 context 对象：
var cxt=c.getContext(&2d&);
getContext(&2d&) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle=&#FF0000&;
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例：
实例 - 线条
通过指定从何处开始，在何处结束，来绘制一条线：
JavaScript 代码：
&script type=&text/javascript&&
var c=document.getElementById(&myCanvas&);
var cxt=c.getContext(&2d&);
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
canvas 元素：
&canvas id=&myCanvas& width=&200& height=&100& style=&border:1px solid #c3c3c3;&&
Your browser does not support the canvas element.
实例 - 圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
JavaScript 代码：
&script type=&text/javascript&&
var c=document.getElementById(&myCanvas&);
var cxt=c.getContext(&2d&);
cxt.fillStyle=&#FF0000&;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
canvas 元素：
&canvas id=&myCanvas& width=&200& height=&100& style=&border:1px solid #c3c3c3;&&
Your browser does not support the canvas element.
实例 - 渐变
使用您指定的颜色来绘制渐变背景：
JavaScript 代码：
&script type=&text/javascript&&
var c=document.getElementById(&myCanvas&);
var cxt=c.getContext(&2d&);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,&#FF0000&);
grd.addColorStop(1,&#00FF00&);
cxt.fillStyle=
cxt.fillRect(0,0,175,50);
canvas 元素：
&canvas id=&myCanvas& width=&200& height=&100& style=&border:1px solid #c3c3c3;&&
Your browser does not support the canvas element.
实例 - 图像
把一幅图像放置到画布上：
JavaScript 代码：
&script type=&text/javascript&&
var c=document.getElementById(&myCanvas&);
var cxt=c.getContext(&2d&);
var img=new Image()
img.src=&flower.png&
cxt.drawImage(img,0,0);
canvas 元素：
&canvas id=&myCanvas& width=&200& height=&100& style=&border:1px solid #c3c3c3;&&
Your browser does not support the canvas element.
参考手册：
参考手册：