canvas基础知识 + 案例(绘制矩形、直线、圆形、三角形、弧线)

添加canvas元素,以及获得渲染上下文context.

<canvas id="canvas" width="300" height="300"><canvas/>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');// 获得上下文；

●绘制矩形

绘制矩形常用方法：
1: fillRect()       以当前的fillStyle属性值来填充
2: strokeRect()       以当前strokeStyle属性值来填充
3:clearRect()       清除某一区域
三个方法参数完全相同:(x,y,width,height)
x,y表示绘制的起始点，width,height表示绘制矩形的宽高。

 var canvas = document.getElementById('mycanvas');
    // 获取上文对象
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#ccc";// 设置填充颜色
    ctx.fillRect(0,0,300,100);// 绘制一个矩形
    ctx.fillStyle = "pink";// 设置填充颜色
    ctx.strokeStyle = "black"; // 设置边框颜色
    ctx.lineWidth = 10;// 设置边框宽度
    ctx.fillRect(40,20,220,60);
    ctx.strokeRect(40,20,220,60);
    ctx.clearRect(100,35,30,30);// 清除指定区域
    ctx.fillStyle = "lightblue";
    ctx.fillRect(100,35,30,30);

canvas绘图的基本方法：

开始创建路径beginPath()必须调用，
1：lineTo(x,y) : 指定目标坐标(x,y),且在两坐标之间画一条直线。
2：moveTo(x,y): 指定绘制的起始点，但不绘制
3：rectRect(x,y,width,height): 在(x,y)处绘制一个宽为width,高为height的矩形，与fillRect()和strokeRect()不一样的是：这个函数创建的是一个路径，而不是单独的形状。
4：arc(x,y,radius,startAngle,endAngle,boolean)：绘图中心在(x,y)的弧，半径是radius，角度在startAngle与endAngle之间，最后一个参数布尔类型，true为顺时针。
5：arcTo(x1,y1,x2,y2,radius):绘制从上一条经过(x1,y1)到(x2,y2)的弧，radius表示半径。
6：fill()：使用fillStyle属性值来填充一个子路径
7：stroke():使用lineWidh、lineCap、lineJoin和strokeStyle对所有子路径进行填充
8：closePath():关闭路径
9: clip()：使用计算所有的子路径而建立新的剪切区，未闭合的子路径在填充时按闭合方式填充，但不影响实际的子路径集合，新的剪切区域将替换当前的剪切区域。
10: lineCap属性：指定线条末端的样式
1：butt:每根线的头和尾都是长方形
2：round：每根线的头和尾都是半圆形的箭头
3：square：每根线的头和尾都增加一个长方形，长度为线的宽一半，高度为线的宽。
11：lineJoin属性：修改当前形状中的线段的连接方式，让拐角变得更圆滑。

●绘制直线

  var canvas = document.getElementById('mycanvas');
    if(canvas.getContext)
    {
        var ctx = canvas.getContext('2d');
        var width = canvas.width;
        var height = canvas.height;
        ctx.beginPath();
        ctx.lineWidth = 12;
        ctx.moveTo(0,0);
        // 用直线画出矩形
        ctx.lineTo(width,0);
        ctx.lineTo(width,height);
        ctx.lineTo(0,height);
        ctx.lineTo(0,0);
        ctx.lineCap = 'round';// 每个线条的头和尾都增加一个半圆形的箭头
        ctx.stroke();// 用来填充线条
    }
    canvas.addEventListener('click',function(event){
        var event = event || window.event;
        ctx.moveTo(event.clientX,event.clientY);
        ctx.lineTo(0,0);
        ctx.stroke();
    });
 
    

●绘制圆形

  var canvas = document.getElementById('mycanvas');
    if(canvas.getContext)
    {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = '#202020';// 填充颜色
        ctx.arc(80,80,80,0,Math.PI*2,true);//绘制圆形
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(240,80,80,0,Math.PI/2 ,false);
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(470,80,80,(Math.PI*120/180),0,true);
        ctx.fill();
    }

●绘制三角形

 var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(100,20);
    ctx.lineTo(20,20);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle = '#06F';
    ctx.moveTo(40,120);
    ctx.lineTo(120,40);
    ctx.lineTo(120,120);
    ctx.fill();

●绘制弧线

 var canvas = document.getElementById('mycanvas');
    if(canvas.getContext)
    {
        var ctx = canvas.getContext('2d');
        var x0 = 50,y0 = 50,x1 = 500,y1 = 50,x2 = 250,y2 = 150;
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.strokeStyle = '#f00';
        ctx.lineWidth = 2;
        ctx.arcTo(x1,y1,x2,y2,10);//绘制从一起点到(x1,y1),再经过(x1,y1)到(x2,y2)的弧长,30表示半径
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.lineWidth = 1;
        ctx.moveTo(x0,y0);
        ctx.lineTo(x1,y1);
        ctx.fillText("x1,y1",x1 + 10,y1 + 10);
        ctx.lineTo(x2,y2);
        ctx.fillText("x2,y2",x2 + 10,y2 + 10);
        ctx.stroke();
        canvas.addEventListener('click',function(event){
            var  event = event || window.event;
            alert(event.clientX)

        });