html5 canvas入门知识

什么是canvas？

使用canvas，可以在网页上绘制图像。我们常见的图表类网页、地图类网页上面那些复杂的图像、炫酷的效果，都可以使用canvas来实现。通俗点说，canvas就是画家手中的画板，用js作笔来画出心中的恢弘山河。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加其他图像的方法。

用一个简单栗子来认识它

在网页上绘制一个圆

<canvas id="cvs" width="300" height="300"</canvas>
<script>
    var canvas = document.getElementById('cvs');

//    判断是否支持canvas
    if(canvas.getContext){
        //获取canvas上下文
        var ctx = canvas.getContext('2d');
        //定义一个路径
        ctx.beginPath();
        //画一个圆形路径
        ctx.arc(50,50,50,0,Math.PI*2);
        //定义填充颜色
        ctx.fillStyle = "rgb(160,224,0)";
        //填充圆形
        ctx.fill();
    }else{
        console.info('当前浏览器不支持canvas属性');
    }
</script>

通过上面的示例 我就在一个300*300的画布上面，以偏移左上角x轴、y轴各50px的点为圆心，画了一个半径为50px的圆。

效果图-1

看过一个简单的栗子之后，让我们来了解一下canvas常见的一些方法。

常用方法

• 获取canvas上下文

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

可能有些人会好奇，这里为什么是2d，难道还有3d吗？答案是有的。
比如：WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 。
但是我们现在主要把注意力放到2d渲染上下文中。

• 绘制图像类型
  填充——context.fill()
  描边——context.stroke()

• 绘制的样式
  填充颜色——context.fillStyle
  描边颜色——context.strokeStyle
  在样式中，可以有几种表示颜色的方法

  • 直接用颜色名称：red green blue
  • 使用十六进制值：#eef
  • 使用rgb颜色：rgb(1-255,1-255,1-255) rgba(1-255,1-255,1-255,透明度)

• 绘制路径
  绘制路径，就相当于我们定了一个物件的轮廓，然后我们就可以对它进行描边或者填充让它变得可见。
  绘制线条——context.lineTo(x,y)
  绘制圆弧——context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
  我们可以用线条和圆弧来组合各种复杂的形状，然后对它进行填充或描边。但是还有两个要注意，在开始画路径之前，要使用context.beginPath()来定义路径的开始，在结束路径时，要使用context.closePath()来进行路径的闭合。

个人理解

canvas就是工程师眼中的画板，我们使用js这支画笔，在指定的位置定好指定的路径，然后对它进行填充或描边。最后通过多个图形的组合排序来实现我们的需求。

（刚接触canvas，以上都是个人的粗浅认识，如果有什么错误，麻烦多多指出，后面有新的知识，会持续修改这篇文章的）