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></canvas>之间是提示语句,浏览器不支持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).