canvas绘图详解（一）

一、canvas绘图环境

<canvas id="canvas" width="800" height="800">该浏览器不支持canvas元素</canvas>
在<body></body>中添加这段代码相当于创建了一块画布，要使用<canvas>元素，必须为其设置画布大小，写在<canvas></canvas>标签内的内容将在使用的浏览器不支持<canvas>时显示。想要绘图，还必须获得绘图上下文，

var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");

二、路径绘制

moveTo（x,y）将绘制坐标移到（x,y）,但不进行画线。
lineTo（x,y）从上一点开始，绘制直线到（x,y）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画线</title>
    <style type="text/css">
        #canvas
        {
            display: block;
            border:1px solid #ccc;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var canvas=document.getElementById('canvas');
        canvas.width="600";
        canvas.height="600"
        var context=canvas.getContext("2d");
        
        context.moveTo(100,100);
        context.lineTo(500,500);
        context.lineTo(100,500);
        context.lineWidth=5;     //设置画线宽度
        context.strokeStyle="#058";  //设置画线的颜色
        context.stroke();  //正式进行画线
    }
        
    </script>
</body>
</html>

效果如图所示：

image.png

如果想连接图形的首尾，绘制一个封闭的图形，有两种做法

再使用context.lineTo(start，end);连接图形的首尾坐标。
使用beginPath()和closePath()也将实现同样的效果。对于实现封闭图形很有用。

       context.beginPath();
       context.moveTo(100,100);
       context.lineTo(500,500);
       context.lineTo(100,500);
       context.closePath();

arc（x,y,radius,startAngle,endAngle,direction）以（x,y）为圆心，画一条弧线。direction为true为逆时针方向绘制，为false表示为顺时针绘制，如果不进行设定，默认为true。无论顺时针还是逆时针，正右方都为0弧度，正下方为 PI/2,正左方为PI.正上方为PI/2*3;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画线</title>
    <style type="text/css">
        #canvas
        {
            display: block;
            border:1px solid #ccc;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var canvas=document.getElementById('canvas');
        canvas.width="600";
        canvas.height="600"
        var context=canvas.getContext("2d");
        context.arc(200,200,50,0,Math.PI,false)
        context.lineWidth=5;
        context.strokeStyle="#058";
        context.stroke();
    }
    </script>
</body>
</html>

效果如图所示：

image.png

rect(x,y,width,height):从点x,y绘制一个矩形
使用方法和上面的类似，不过多介绍。

canvas绘图详解（一）

一、canvas绘图环境

二、路径绘制

推荐阅读更多精彩内容