H5中的canvas标签
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素
canvas是画布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<!-- 画布中的颜色要放在字符串中-->
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid black ;display: block; margin:50px auto; "
>
Your brower can not use <code>canvas</code> element.
</canvas>
不能在canvas上添加东西的，先建立上下文环境才能添加东西
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");曲线绘制
①画一段弧线，圆心坐标centerx,centery，半径是radius的一个圆，角度从startingAngle到endingAngle的一段弧，最后一个参数是顺时针还是逆时针，false = 顺时针，ftrue
= 逆时针；
context.arc ( centerx,centery,radius, startingAngle,endingAngle,anticlockwise = false);
②将当前的坐标或者新moveTo到的点开始，绘制以(x0,y0)与（x1,y1）的直线和(x1,y1)与（x2,y2）的直线做切线半径为radius的弧线。结束点并不一定时（x2,y2）,曲线的起点是（x0,y0），但也不以为着有弧线。
context.arcTo ( x1, y1, x2, y2, radius );
②将当前的坐标或者新moveTo到的点开始，绘制以(x0,y0)与（x1,y1）的直线和(x1,y1)与（x2,y2）的直线做切线半径为radius的弧线。结束点并不一定时（x2,y2）,曲线的起点是（x0,y0），但也不以为着有弧线。
context.arcTo ( x1, y1, x2, y2, radius );
二次贝塞尔曲线
context.quadraticCurveTo ( x1,y1, ——>控制点
x2,y2 );——>结束点
以上一次的结点或者moveTo到的一个新点为起始点,到（x2,y2）的一段弧线，这段弧线的控制点是（x1,y1），起点终点分别是（x0,y0）(x2,y2).
context.quadraticCurveTo ( x1,y1, ——>控制点
x2,y2 );——>结束点
以上一次的结点或者moveTo到的一个新点为起始点,到（x2,y2）的一段弧线，这段弧线的控制点是（x1,y1），起点终点分别是（x0,y0）(x2,y2).
三次贝塞尔曲线
context.bezeirCurveTo ( x1,y1,x2,y2,——>控制点
x3,y3 )——>结束点
以上一次的结点或者moveTo到的一个新点为起始点，到（x3,y3）的一段弧线，弧线的控制点是（x1,y1）（x2,y2）的一段弧线，起点终点分别是（x0,y0）(x3,y3).
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
