HTML5 Canvas

作者: 大力士_f398 | 来源:发表于2017-06-13 20:23 被阅读0次

html5 Canvas画图5：曲线之arc
canvas笔记
canvas
HTML5 Canvas 完整测试 - canvas 标签
HTML5 Canvas笔记——绘图剪纸
canvas浅尝
canvas学习一
14-JS canvas 学习
1.canvas基础(1)
HTML5 Canvas笔记——打印出Hello Canvas

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="300px" height="300px" style="border: 1px black solid;"></canvas>
    </body>
    <script type="text/javascript">
            var c = document.getElementById("myCanvas");  
            /*通过获取id来寻找canvas元素*/
            var cxt = c.getContext("2d");
            /*getContext(contextID)方法返回一个用于在画布上绘图的环境,contextID指定了您想要在画布上绘制的类型,当前唯一的合法值是"2d",它指定了二维绘图*/
            cxt.beginPath();
            /*beginPath()丢弃任何当前定义的路径并且开始一条新的路径,当一个画布的环境第一次创建,该方法会被显式地调用.*/
            cxt.moveTo(200,200);
            /*moveTo(x,y)可把窗口的左上角移动到一个指定的坐标,x,y代表x,y轴的坐标*/
            cxt.lineTo(250,150);
            /*lineTo(x,y)方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条,x,y代表x,y轴的坐标.*/
            cxt.lineTo(250,200);
            cxt.moveTo(200,200);
            cxt.lineTo(250,200);
            cxt.arc(200,200,50,0,2*Math.PI);
            /*arc(x,y,r,sAngle,eAngle,counterclockwise)方法创建弧/曲线（用于创建圆或部分圆,sAngle为起始角，以弧度计.(弧的圆形的三点钟位置是 0 度),eAngle为结束角,counterclockwise可选,规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针*/
            /*起始角设置为 0，结束角设置为 2*Math.PI*/
            cxt.stroke();
            /*stroke()方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径.默认颜色是黑色*/
        </script>
</html>