1.canvas基础

来源：互联网发布：安卓录音软件编辑：程序博客网时间：2024/05/29 15:12

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中颜色和坐标系统

颜色系统：

直接用颜色名称:”red” “green” “blue” “yellow”等
十六进制颜色值:”#FF0000”
RGB颜色系统:rgb(1-255,1-255,1-255)
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>

0 0