1.canvas基础

canvas基础

创建canvas之前首先得创建一个html canvas标签

<canvas id="canvas" width="400" height="500"></canvas>

1.画布环境

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');
</script>

在H5中创建的的canvas标签只是提供了画布创建的基础环境，而并未真正意义创建画布。创建画布的工作全由H5提供给js的API完成。

2.canvas中颜色和坐标系统

颜色系统：

1. 直接用颜色名称:”red” “green” “blue” “yellow”等
2. 十六进制颜色值:”#FF0000”
3. RGB颜色系统:rgb(1-255,1-255,1-255)
4. RGBA颜色透明度系统： rgba(1-255,1-255,1-255,透明度)

坐标系统：

canvas坐标系是一个二维的平面坐标系。原点坐标(0,0)在canvas画布
的左上角位置上，沿着水平方向向右是X轴正方向，垂直方向向
下是Y轴正方向。

3.矩形API

ctx.rect(x,y,width,height); 创建矩形（并未进行任何填充和描边）

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');

    // 通过rect创建一个矩形
    ctx.rect(20,20,150,100);
    // 填充矩形
    ctx.fill();
    // 描边
    ctx.stroke();
</script>

ctx.fillRect(x,y,width,height); 创建一个填充的矩形

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');

    // 通过fillRect创建一个填充的矩形
    ctx.fillRect(0,0,100,100);
</script>

ctx.strokeRect(x,y,width,height); 创建一个描边的矩形

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');

    // 通过strokeRect创建一个描边的矩形
    ctx.strokeRect(100,100,100,100);
</script>

ctx.clearRect(x,y,width,height); 清除画布上一块指定矩形区域的的像素

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');

    // 通过clearRect清除一块指定区域的像素
    ctx.clearRect(20,20,50,40);
</script>